H5-历史管理

触发历史管理：1通过跳转页面  2hash # 3.pushState

 

第一个原始版本：

 var oBtn=document.getElementById("btn");
   var oBox=document.getElementById("box");
   var json={};
   oBtn.onclick=function(){
      var num=Math.random();
      var arr=randomNum(35,7);
      json[num]=arr;
      oBox.innerHTML=json[num];
      window.location.hash=num;
    }

    //一旦hash更改就更改oBox的innerHTML
    window.οnhashchange=function () {
        oBox.innerHTML=json[window.location.hash.substring(1)];
    }

    /*
    randomNum(iAll,iNow)随机从iAll中获得iNow位数的新数组
     */
   function randomNum(iAll,iNow){
        var arr=[];
        var newArr=[];
       for(var i=0;i<=iAll;i++){
           arr.push(i);
       }
       for(var i=0;i<iNow;i++){
           newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
       }
        return newArr;
   }

第二种方法：需要打开WindowsWAMP，在里面运行

var oBtn=document.getElementById("btn");
   var oBox=document.getElementById("box");
   var json={};
   oBtn.onclick=function(){
      var  arr=randomNum(35,7);
       history.pushState(arr,"");//添加数据
       oBox.innerHTML=arr;
    }
    window.onpopstate=function (ev) {
         var ev=ev||event;
       oBox.innerHTML=ev.state; //读取数据
    }
    /*
    randomNum(iAll,iNow)随机从iAll中获得iNow位数的新数组
     */
   function randomNum(iAll,iNow){
        var arr=[];
        var newArr=[];
       for(var i=0;i<=iAll;i++){
           arr.push(i);
       }
       for(var i=0;i<iNow;i++){
           newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
       }
        return newArr;
   }

 

转载于:https://www.cnblogs.com/zz-mystudy/p/6817337.html