JavaScript实现35选7并记录历史状态

aaarticlea/png;base64,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" alt="" />

一、利用hash实现

• 随机数方法Math.random()；

• 数字的splice方法；

• window.location.hash；

• window.onhashchange方法。

1.1 HTML代码

<button id="btn" type="button">35选7</button>
<h3 id="h3"></h3>

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;
    }
}
</script>

二、利用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;
    }
}

参考：http://study.163.com/course/courseLearn.htm?courseId=742016#/learn/video?lessonId=910109&courseId=742016