html5 hash
2015-11-11 11:19
731 查看
作者:zccst 现在的开发,越来越倾向于页面内跳转,这种情况下需要更新自己的知识,来实现页面内跳转。history就是解决这个问题的。
HTML5有两种解决办法:
1,onhashchange 用到了window.loaction.hash对象(存,取)
2,history
(1) pushstate 三个参数:数据,标题(为空),url(可选)。
(2) popstate是一个事件,读取event.state数据
注意:url是虚假的。用户不能实际找到。
本质上:两种方式都是存值+取值事件。
简化后就是:
和
详情参考如下参数随机数例子:
HTML5有两种解决办法:
1,onhashchange 用到了window.loaction.hash对象(存,取)
2,history
(1) pushstate 三个参数:数据,标题(为空),url(可选)。
(2) popstate是一个事件,读取event.state数据
注意:url是虚假的。用户不能实际找到。
本质上:两种方式都是存值+取值事件。
简化后就是:
window.loaction.hash = srcArr; window.onhashchange=function(){ var val = window.loaction.hash; }
和
history.pushState = srcArr; window.onpopstate=function(event){ var val = event.state; };
详情参考如下参数随机数例子:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>无标题文档</title> <script type="text/javascript"> window.onload=function (){ var oInput = document.getElementById("input1"); oInput.onclick=function(){ var oDiv = document.getElementById("div1"); var num = generateNum (6); //onhashchange window.location.hash = num; window.onhashchange = function(){ oDiv = = window.location.hash.substring(1); } //history oDiv.innerHTML=num; //生成随机数 function generateNum (num){ var ret = []; for (var i = 0; i < num; i++) { ret.push(Math.ceil(100*Math.random())); }; return ret; } } } </script> </head> <body> 中奖号码: <div id="div1"></div> <input type="button"value="生成随机号码"id="input1"/> </body> </html>
相关文章推荐
- c语言实现hashmap(转载)
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Ruby中Hash的11个问题解答
- 原生js结合html5制作小飞龙的简易跳球
- Ruby简明教程之数组和Hash介绍
- 在C#中生成与PHP一样的MD5 Hash Code的方法
- js中hash和ico的关联分析
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- Javascript SHA-1:Secure Hash Algorithm
- HTML5实现微信拍摄上传照片功能
- jQuery+HTML5加入购物车代码分享
- 实现音乐播放器的代码(html5+css3+jquery)
- 2014 HTML5/CSS3热门动画特效TOP10
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码