一、利用hash实现
-
随机数方法Math.random()；
-
数字的splice方法；
-
window.location.hash；
-
window.onhashchange方法。
1.1 HTML代码
1.2 JS代码
window.onload = function(){ var oBtn = document.getElementById('btn'), oDiv = document.getElementById('h3'); // 定义json用于存储hash对应的值 var json = {}; // 按钮点击事件 oBtn.onclick = function(){ // 获取数组[1,2,3...35] var arr1 = getArr(35); // 35选7 var result = getFinalArr(arr1, 7); // 定义hash对应随机数 var ranNum = Math.random(); window.location.hash = ranNum; json[ranNum] = result; oDiv.innerHTML = json[ranNum]; // hash值改变时的事件 window.onhashchange = function(){ oDiv.innerHTML = json[window.location.hash.substring(1)] || null; // 当hash值为空时oDiv.innerHTML赋值为null } } // 35选7方法 function getFinalArr(arr,range){ var _arr1 = []; for(var i = 0; i < range; i++){ var res = arr.splice(Math.random()*arr.length, 1); _arr1.push(res); } return _arr1; } // 生成数组[1,2,3...35]方法 function getArr(num){ var _arr2 =[]; for(var i = 1; i <= num; i++){ _arr2.push(i); } return _arr2; }}
二、利用HTML5中的history方法实现
-
存储历史记录数据：history.pushState(arg1, arg2, arg3)；
-
获取历史记录数据：window.popstate事件发生时，通过event.state获取数据。
2.1 JS代码
window.onload = function(){ /** * history: pushState(arg1, arg2, arg3) * ar1 --> 要存储的数据； arg2 --> 标题，目前不被支持，一般为空； arg3 --> 地址(可选,虚拟地址，刷新找不到页面) * history: popstate事件 event.state */ var oBtn = document.getElementById('btn'), oDiv = document.getElementById('h3'); oBtn.onclick = function(){ // 获取数组[1,2,3...35] var arr1 = getArr(35); // 35选7 var result = getFinalArr(arr1, 7); // 存储历史记录数据 history.pushState(result, ''); oDiv.innerHTML = result; // hash值改变（即点击前进后退按钮） window.onpopstate = function(ev){ oDiv.innerHTML = ev.state || null; } } // 35选7方法 function getFinalArr(arr,range){ var _arr1 = []; for(var i = 0; i < range; i++){ var res = arr.splice(Math.random()*arr.length, 1); _arr1.push(res); } return _arr1; } // 生成数组[1,2,3...35]的方法 function getArr(num){ var _arr2 =[]; for(var i = 1; i <= num; i++){ _arr2.push(i); } return _arr2; }}
参考：