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>
巴特西

html5(历史管理）

最新文章

热门文章
