实现历史管理的两种方法:
1.onhashchange 事件;
2.通过pushState和popstate事件。
下面是通过福彩35选7来简单实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="input1" id="input1" value="35选7" />
<div id="div1"></div>
<script type="text/javascript">
//onhashchange 事件:当hash值有变化时触发;
var oInput=document.getElementById("input1"),
oDiv=document.getElementById("div1"),
obj={};
oInput.onclick=function(){
var number=randomNum(35,7);
oDiv.innerHTML=number;
var ORD=Math.random(); //随机数
obj[ORD]=number; //将随机数和数组对应起来
window.location.hash=ORD; //地址栏中hash为"#"+随机数
}
window.onhashchange=function(){
var num=obj[window.location.hash.substring(1)] || ''; //返回最开始页面,oDiv.innerHTML='';
oDiv.innerHTML=num;
}
//从1-35中选出7个随机数的函数
function randomNum(total,sample){
var arr=[];
var arr2=[];
for (var i=1; i<=total; i++) {
arr.push(i);
}
for (var i=0; i<sample; i++) {
arr2.push(arr.splice(Math.floor(Math.random()*arr.length),1));
}
return arr2;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="input1" id="input1" value="35选7" />
<div id="div1"></div>
<script type="text/javascript">
//pushState:存数据,三个参数:数据,标题,地址
//popstate事件:取数据,event.state
var oInput=document.getElementById("input1"),
oDiv=document.getElementById("div1"),
iNow=0;
oInput.onclick=function(){
var number=randomNum(35,7);
oDiv.innerHTML=number;
history.pushState(number,'',iNow++);//第三个参数不写时,地址栏不变化。而此处地址栏会变化,但此处地址是虚假的,需在服务器制定地址,否则刷新地址会找不到页面
}
window.onpopstate=function(ev){
var num=ev.state || '';
oDiv.innerHTML=num;
}
//从1-35中选出7个随机数的函数
function randomNum(total,sample){
var arr=[];
var arr2=[];
for (var i=1; i<=total; i++) {
arr.push(i);
}
for (var i=0; i<sample; i++) {
arr2.push(arr.splice(Math.floor(Math.random()*arr.length),1));
}
return arr2;
}
</script>
</body>
</html>