• html5(历史管理)


    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    //第一种实现 :onhashchange: 事件;当hash值有变化的时候,就触发 
    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++)
    	  {
    	     var a=Math.floor(Math.random()*arr.length);
    	     newArr.push(arr.splice(a,1));
    	  }
    	  return newArr;
       }
      //第二种实现: histroy
       //pushState:三个参数:数据  标题(都没实现) 地址(可选)
       //popstate事件: 读取数据  event.state
       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;
    	}
       
    }
    </script>
    </head>
    
    <body>
    <input type="button" id="input1" value="35选7" />
    <div id="div1"></div>
    </body>
    </html>
    

      

  • 相关阅读:
    如何使用Linux命令实时查看最新的日志信息
    什么是缺陷(bug)
    APP 崩溃测试点小结
    软件测试之权限测试
    web安全测试之 xss攻击
    URL详谈
    随机生成名字或短句代码机
    JAVA环境变量配置
    Properties类与读取properties文件
    JAVA 打印九九乘法表
  • 原文地址:https://www.cnblogs.com/zcttxs/p/3176968.html
Copyright © 2020-2023  润新知