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

一、利用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