H5-历史管理

实现历史管理的两种方法:
1.onhashchange 事件;
2.通过pushState和popstate事件。
下面是通过福彩35选7来简单实现。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" name="input1" id="input1" value="35选7" />
        <div id="div1"></div>
        <script type="text/javascript">
            //onhashchange 事件:当hash值有变化时触发;
            var oInput=document.getElementById("input1"),
                oDiv=document.getElementById("div1"),
                obj={};

            oInput.onclick=function(){
                var number=randomNum(35,7);
                oDiv.innerHTML=number;
                var ORD=Math.random();  //随机数
                obj[ORD]=number;  //将随机数和数组对应起来
                window.location.hash=ORD;  //地址栏中hash为"#"+随机数
            }

            window.onhashchange=function(){
                var num=obj[window.location.hash.substring(1)] || ''; //返回最开始页面,oDiv.innerHTML='';
                oDiv.innerHTML=num;
            }

            //从1-35中选出7个随机数的函数
            function randomNum(total,sample){
                var arr=[];
                var arr2=[];

                for (var i=1; i<=total; i++) {
                    arr.push(i);
                }

                for (var i=0; i<sample; i++) {
                    arr2.push(arr.splice(Math.floor(Math.random()*arr.length),1));
                }

                return arr2;
            }
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" name="input1" id="input1" value="35选7" />
        <div id="div1"></div>
        <script type="text/javascript">
            //pushState:存数据,三个参数:数据,标题,地址
            //popstate事件:取数据,event.state
            var oInput=document.getElementById("input1"),
                oDiv=document.getElementById("div1"),
                iNow=0;

            oInput.onclick=function(){
                var number=randomNum(35,7);
                oDiv.innerHTML=number;
                history.pushState(number,'',iNow++);//第三个参数不写时,地址栏不变化。而此处地址栏会变化,但此处地址是虚假的,需在服务器制定地址,否则刷新地址会找不到页面
            }

            window.onpopstate=function(ev){
                var num=ev.state || '';
                oDiv.innerHTML=num;
            }

            //从1-35中选出7个随机数的函数
            function randomNum(total,sample){
                var arr=[];
                var arr2=[];

                for (var i=1; i<=total; i++) {
                    arr.push(i);
                }

                for (var i=0; i<sample; i++) {
                    arr2.push(arr.splice(Math.floor(Math.random()*arr.length),1));
                }

                return arr2;
            }
        </script>
    </body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章