HTML5之历史管理
l 前进，后退
触发历史管理 : 1.通过跳转页面 2.hash 3.pushState
• onhashchange ：改变hash值来管理
实例：随机选彩票
<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
varoInput = document.getElementById('input1');
varoDiv = document.getElementById('div1');
varjson = {};
oInput.οnclick= function(){
varnum = Math.random();
vararr = randomNum(35,7);
json[num]= arr;
oDiv.innerHTML= arr;
window.location.hash= num;
};
window.οnhashchange= function(){
//hash值与随机数相结合
oDiv.innerHTML= json[window.location.hash.substring(1)];
};
//在1-iAll中选取iNow个随机数
functionrandomNum(iAll,iNow){
vararr = [];
varnewArr = [];
for(vari=1;i<=iAll;i++){
arr.push(i);
}
for(vari=0;i<iNow;i++){
newArr.push(arr.splice( Math.floor(Math.random()*arr.length) ,1) );
}
returnnewArr;
}
};
</script>
</head>
<body>
<input type="button"value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>
• history ：
– 服务器下运行
– pushState: 三个参数 ：数据 标题(都没实现) 地址(可选)
– popstate事件 : 读取数据 event.state
– 注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
var oInput= document.getElementById('input1');
var oDiv =document.getElementById('div1');
oInput.οnclick= function(){
vararr = randomNum(35,7);
history.pushState(arr,'',arr);
oDiv.innerHTML= arr;
};
window.onpopstate = function(ev){
oDiv.innerHTML= ev.state;
};
functionrandomNum(iAll,iNow){
vararr = [];
varnewArr = [];
for(vari=1;i<=iAll;i++){
arr.push(i);
}
for(vari=0;i<iNow;i++){
newArr.push(arr.splice( Math.floor(Math.random()*arr.length) ,1) );
}
returnnewArr;
}
};
</script>
</head>
<body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>
扫一扫
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
