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

總結

以上是生活随笔為你收集整理的JavaScript实现35选7并记录历史状态的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。