<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html历史管理—提高用户体验</title> </head> <script type="text/javascript"> //两种方法// ¥注释的为第一种方法 当hash值有变化时,触发事件onhashchange// $ 为第二种方//第二种实现: histroy //pushState:三个参数:数据 标题(都没实现) 地址(可选) //popstate事件: 读取数据 event.statewindow.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>
html历史管理—提高用户体验
最新推荐文章于 2024-08-16 14:28:57 发布