html5之页面跳转-hash

最新推荐文章于 2023-10-30 21:13:29 发布

只看五分钟佩奇的小姑姑

最新推荐文章于 2023-10-30 21:13:29 发布

阅读量1.6k

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/aloe_904/article/details/78429751

版权

前端的尘封往事专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史管理</title>

    <script type="text/javascript">

    // window.onload=function(){

    //  var oInput=document.getElementById('input1');
    //  var oDiv=document.getElementById('div1');

    //  oInput.onclick=function(){
    //      oDiv.innerHTML=randomNum(35,7);
    //  }

    //  function randomNum(iAll,iNow){
    //      var arr=[];
    //      var newArr=[];
    //      for(var i=1;i<=iAll;i++){
    //          arr.push(i);
    //      }

    //      for(var i=1;i<=iNow;i++){
    //          newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
    //      }

    //      return  newArr;
    //  }
    // }   这种随机生成的数字点击后就回不去，下面的方法就可以做到





    window.onload=function(){

        var oInput=document.getElementById('input1');
        var oDiv=document.getElementById('div1');
        var json={};

        oInput.onclick=function(){
            var num=Math.random();
            var arr=randomNum(35,7);
            json[num]=arr;
            oDiv.innerHTML=arr;
            window.location.hash=num;
        }//出现前进和后退的箭头

        window.onhashchange=function(){

            oDiv.innerHTML=json[window.location.hash.substring(1)]
        }//当前进和后退的箭头出现后，页面也会跟随跳转

        function randomNum(iAll,iNow){
            var arr=[];
            var newArr=[];
            for(var i=1;i<=iAll;i++){
                arr.push(i);
            }

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

            return  newArr;
        }
    } 
    </script>
</head>
<body>  
    <input type="button" value="随机选择" id="input1">
    <div id="div1"></div>
</body>
</html>
<!-- 
触发历史管理页面：1.通过跳转页面 2.hash值 3.pushState 

onhashchange:改变hash值来管理，使页面跳转


-->