<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>历史管理</title>
<script type="text/javascript">
// window.onload=function(){
// var oInput=document.getElementById('input1');
// var oDiv=document.getElementById('div1');
// oInput.onclick=function(){
// oDiv.innerHTML=randomNum(35,7);
// }
// function randomNum(iAll,iNow){
// var arr=[];
// var newArr=[];
// for(var i=1;i<=iAll;i++){
// arr.push(i);
// }
// for(var i=1;i<=iNow;i++){
// newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
// }
// return newArr;
// }
// } 这种随机生成的数字点击后就回不去,下面的方法就可以做到
window.onload=function(){
var oInput=document.getElementById('input1');
var oDiv=document.getElementById('div1');
var json={};
oInput.onclick=function(){
var num=Math.random();
var arr=randomNum(35,7);
json[num]=arr;
oDiv.innerHTML=arr;
window.location.hash=num;
}//出现前进和后退的箭头
window.onhashchange=function(){
oDiv.innerHTML=json[window.location.hash.substring(1)]
}//当前进和后退的箭头出现后,页面也会跟随跳转
function randomNum(iAll,iNow){
var arr=[];
var newArr=[];
for(var i=1;i<=iAll;i++){
arr.push(i);
}
for(var i=1;i<=iNow;i++){
newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
}
return newArr;
}
}
</script>
</head>
<body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>
<!--
触发历史管理页面:1.通过跳转页面 2.hash值 3.pushState
onhashchange:改变hash值来管理,使页面跳转
-->
html5之页面跳转-hash
最新推荐文章于 2023-10-30 21:13:29 发布