代码改变世界

HTML5新功能之七 《历史管理》

2014-06-14 22:48  臭小子1983  阅读(210)  评论(0)  编辑  收藏  举报

什么是历史管理

　　象PC机我在浏览器打开一个站之后又打开一个站，这时候就存到了历史管理中，可以通过前退后退来控制页面的跳转.

　　

一、HTML5的window.onhashchange

　　获取历史管理

 1 <div id="box"></div>
 2 <input type="button" id="randomBtn" value="随机彩票">
 3 
 4 <script>
 5     // 通过hash值来存储号码
 6 
 7     function getId(id){
 8         return document.getElementById(id);
 9     }
10     // 返回随机号码
11     function randomNum(total, selNum){
12         var arr = [];
13         var setArr = [];
14         for(var i=1; i<=total; i++){
15             arr.push(i);
16         }
17 
18         for(var k=0; k<selNum; k++){
19             var setRandom = Math.floor(Math.random() * (total-1));
20             console.log(arr[setRandom]);
21             setArr.push(arr[setRandom]);
22             arr.splice(setRandom, 1)
23             total--;
24         }
25         return setArr;
26     }
27 
28     var oRandomBtn = getId("randomBtn");
29     var oBox = getId("box");
30     var val;
31 
32     oRandomBtn.onclick = function(){
33         val = randomNum(32, 7);
34 
35         var setHtml = ""
36         oBox.innerHTML = "";
37 
38         for(var s=0; s<val.length; s++){
39             if(s==val.length-1){
40                 setHtml += val[s];
41             }
42             else{
43                 setHtml += val[s]+",";
44             }
45         }
46         oBox.innerHTML = setHtml;
47 
48         // 将url加入hash值
49         location.hash = setHtml;
50     }
51 
52     // 将页面前进后退时取Hash值
53     window.onhashchange = function(){
54         var num = location.hash.split("#")[1];
55         if(!num){
56             return false;
57         }
58         oBox.innerHTML = num;
59     }
60 </script>