html历史管理—提高用户体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html历史管理—提高用户体验</title>
</head>
<script type="text/javascript">
    //两种方法// ¥注释的为第一种方法 当hash值有变化时,触发事件onhashchange
    //  $ 为第二种方
    //第二种实现: histroy
    //pushState:三个参数:数据  标题(都没实现) 地址(可选)
    //popstate事件: 读取数据  event.state

       window.onload = function () {
        var oDiv = document.getElementById('div1'),
                oInput = document.getElementById('input1');
        var obj = {};//对象数组
        var num;
        oInput.onclick = function () {
            var number = randomNum(35,7);
            oDiv.innerHTML = number;
            history.pushState(number, ''); //取值  num++自己设定网址 // $$
//      ¥   var oRD = Math.random();//产生随机数;
//      ¥   obj[oRD]=number;
//      ¥   window.location.hash = oRD;//网址上显示的内容
//      ¥   //window.location.hash = number; //将数 存储到hash表中 此时产生历史管理
        }
//      ¥  //当hash值有变化时,触发该事件onhashchange ;window.location.hash.substring(1);hash中存储的随机数
//      ¥  window.onhashchange = function () {
//      ¥      // var number =  window.location.hash.substring(1); 下面随机数 通过obj 映射的数组
//      ¥      //obj[ window.location.hash.substring(1)];为空时,会返回一个undefined ,|| '' 不显示内容
//      ¥     var number =obj[ window.location.hash.substring(1)] || '';//获取的hash值有#,substring() 截取#号
//      ¥     oDiv.innerHTML = number;//将获取的hash值重新显示在页面上
//      ¥ }
        //历史点击时,触发该事件 取值
        window.onpopstate = function (ev) { // $$
            var number =ev.state || '';      // $$
            oDiv.innerHTML=number;          // $$
                    }                        // $$
        //产生随机数
        function randomNum(alls, now) {
            var arr = [];//将35数组存储到数组中
            var newArr = [];//存放7个元素
            for (var i = 1; i < alls; i++) {
                // alert(arr); 此函数用来测试
                arr.push(i);
            }
//       arr.splice( index,1)从下表开始index数,去1个元素 放到数组中
//        Math.floor(Math.random()*arr.length),Math.random()随机产生一个小数,在0~arr.length之间随意取个值     Math.floor上取整,
            for (var i = 0; i < now; i++) {
                var a = Math.floor(Math.random() * arr.length);
                newArr.push(arr.splice(a, 1));
            }
            return newArr;
        }

    }
    //第二种实现: histroy
    //pushState:三个参数:数据  标题(都没实现) 地址(可选)
    //popstate事件: 读取数据  event.state

</script>
<body>
<input type="button" value="35选7" id="input1"/>

<div id="div1"> </div>
</body>
</html>
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值