html5—历史管理（通过跳转页面））

最新推荐文章于 2021-06-03 13:47:21 发布

M_SIDAER

最新推荐文章于 2021-06-03 13:47:21 发布

阅读量656

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/M_SIDAER/article/details/52833547

历史管理（通过跳转页面）

window.onhashchange
— 改变hash值（#x）来管理

用途：可以做成不改变网址，仅改变hash值进行历史管理（window.location.hash）

练习：做一个随机彩票页面，可以通过历史管理返回
即从1~35随机选择7个数，但这7个数不能出现重复

<body>
<input type="button" value="生成彩票" >
<span></span>
<script>
    var oBtn=document.getElementsByTagName('input')[0];
    var oSpan=document.getElementsByTagName('span')[0];
    var json={};
    function randomticket(howL,num){
        var arr=[];
        var newArr=[];
        for(var i=0;i<howL;i++){
            arr.push(i+1);
        }
        for(var i=0;i<num;i++){
            newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
            }//Math.random()*arr.length得到一个1~35中的随机数，math.floor()向下取整，arr.splice(Math.floor(Math.random()*arr.length),1)返回的是被删除的这个数，整行的意思是将产生的这个随机整数从arr数组中删去，并将这个数存入到newArr数组中,这样可以避免产生重复的随机数 
}
oBtn.onclick=function(){
            var arr1=randomticket(35,7);//arr1数组存的是newArr
            var iRan=Math.random();
            json[iRan]=arr1;//iRan这个随机数为json中的键，数组arr1为json中iRan这个键的值
            oSpan.innerHTML=arr1;
            window.location.hash=iRan;//将随机数iRan作为哈希值，则这个哈希值就是键
        }
        window.onhashchange=function(){//改变hash值（#x）来管理
            //alert(window.location.hash);
            oSpan.innerHTML=json[window.location.hash.substring(1)];//删除前面的#，通过键（hash值）将json中对应的值取出

        }
</script>
</body>