html5之页面跳转-hash

来源：互联网发布：wap彩票网站源码编辑：程序博客网时间：2024/06/05 10:18
<!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值来管理，使页面跳转-->
阅读全文
0 0