您的位置：首页 > Web前端 > HTML

html历史管理—提高用户体验

2016-07-31 15:54 127 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html历史管理—提高用户体验</title>
</head>
<script type="text/javascript">
//两种方法// ￥注释的为第一种方法 当hash值有变化时，触发事件onhashchange
//  $ 为第二种方
//第二种实现: histroy
//pushState:三个参数：数据  标题(都没实现) 地址(可选）
//popstate事件： 读取数据  event.state
window.onload = function () {
var oDiv = document.getElementById('div1'),
oInput = document.getElementById('input1');
var obj = {};//对象数组
var num;
oInput.onclick = function () {
var number = randomNum(35,7);
oDiv.innerHTML = number;
history.pushState(number, ''); //取值  num++自己设定网址 // $$
//  ￥   var oRD = Math.random();//产生随机数；
//  ￥   obj[oRD]=number;
//  ￥   window.location.hash = oRD;//网址上显示的内容
//  ￥   //window.location.hash = number; //将数 存储到hash表中 此时产生历史管理
}
//  ￥  //当hash值有变化时，触发该事件onhashchange ；window.location.hash.substring(1);hash中存储的随机数
//  ￥  window.onhashchange = function () {
//  ￥  // var number =  window.location.hash.substring(1); 下面随机数 通过obj 映射的数组
//  ￥  //obj[ window.location.hash.substring(1)];为空时，会返回一个undefined ，|| '' 不显示内容
//  ￥ var number =obj[ window.location.hash.substring(1)] || '';//获取的hash值有#，substring() 截取#号
//  ￥ oDiv.innerHTML = number;//将获取的hash值重新显示在页面上
//  ￥ }
//历史点击时，触发该事件 取值
window.onpopstate = function (ev) { // $$
var number =ev.state || '';  // $$
oDiv.innerHTML=number;  // $$
}// $$
//产生随机数
function randomNum(alls, now) {
var arr = [];//将35数组存储到数组中
var newArr = [];//存放7个元素
for (var i = 1; i < alls; i++) {
// alert(arr); 此函数用来测试
arr.push(i);
}
//   arr.splice( index,1)从下表开始index数，去1个元素 放到数组中
//Math.floor(Math.random()*arr.length),Math.random()随机产生一个小数，在0~arr.length之间随意取个值 Math.floor上取整，
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

</script>
<body>
<input type="button" value="35选7" id="input1"/>

<div id="div1"> </div>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航