h5--history(历史管理)

历史管理:

• onhashchange:事件,当hash值有变化的时候,就会触发.
  

  <input id="input1" type="button" value="35选7"></input>
  
  <div id="div1"></div>
  
  <script type="text/javascript">
          
  
      window.onload = function(){
          var oInput = document.getElementById('input1');
          var oDiv =document.getElementById('div1');
          var obj = {};
          oInput.onclick = function(){
              var number = randomNum(35,7);
              oDiv.innerHTML = number;
  
              var oRD = Math.random();
              obj[oRD] = number;
  
              window.location.hash = oRD;
          };
  
  
          window.onhashchange = function(){
              var number = obj[window.location.hash.substring(1)]||"";
              oDiv.innerHTML = number;
          }
  
      }
  
      function randomNum(alls,now){
          var arr = [];
          var newArr=[];
          for(var i=1;i<=alls;i++){
              arr.push(i);
          }
          for(var i=0;i<now;i++){
              newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
          }
          return newArr;
      }
  
      </script>

   

• history  --pushState
  　　　　--popstate

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oDiv =document.getElementById('div1');
        var obj = {};

        oInput.onclick = function(){
            var number = randomNum(35,7);
            oDiv.innerHTML = number;
            
            history.pushState(number,"");//第二个参数为空即可,第三个参数是可选的网址变化

        };

        window.onpopstate=function(ev){
            var number = ev.state||'';
            oDiv.innerHTML = number;

        }
    }

    function randomNum(alls,now){
        var arr = [];
        var newArr=[];
        for(var i=1;i<=alls;i++){
            arr.push(i);
        }
        for(var i=0;i<now;i++){
            newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
        }
        return newArr;
    }