<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<script>

 window.onload=function(){

        var oin=document.getElementById('input1');

        var odiv=document.getElementById('div1');

        var json={};

        oin.onclick=function(){

            /*随机获取num值*/

            var num=Math.random();

             /*获取随机7位数*/

            var arr=randomNum(35,7);

           /* 随机索引存arr随机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=0; i<iNow; i++)

                {

                    newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));

                }

                return newArr;

       }

 }

</script>

<body>

    <input type="button" value="随机选择" id="input1">

    <div id="div1"></div>

</body>

</html>

随机数组的的索引存值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<script>

 window.onload=function(){

        var oin=document.getElementById('input1');

        var odiv=document.getElementById('div1');

        oin.onclick=function(){

          var arr=randomNum(35,7);

          /*要存的数组*/

          history.pushState(arr,'');

          odiv.innerHTML=arr;

        };

        /*取数组的函数*/

        window.onpopstate=function(ev)

        {

          odiv.innerHTML=ev.state;

        }

       function randomNum(iAll,iNow)

       {

            var arr=[];

            var newArr=[];

            for(var i=1; i<iAll; i++){

                arr.push(i);

                }

                for(var i=0; i<iNow; i++)

                {

                    newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));

                }

                return newArr;

       }

 }

</script>

<body>

    <input type="button" value="随机选择" id="input1">

    <div id="div1"></div>

</body>

</html>

此方法只适合在服务器上使用

html5 历史管理onhashchange和state的更多相关文章

  1. HTML5历史管理

    边看视频边做的练习,随机显示数字,分别使用history和hash来实现历史管理 <!doctype html> <html> <head> <meta ch ...

  2. html5 历史管理

    1.onhashchange:改变hash值来进行历史管理. <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  3. HTML5历史管理状态机制

    前言:想要不刷新页面同时改变url 可以用HTML5 window对象的 hashChange 事件.同时介绍两个相关的api 和 1个事件. 两个API:1.history.pushState({n ...

  4. html5(历史管理）

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  5. 历史管理 onhashchange

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. HTML5自学笔记[ 8 ]历史管理

    触发历史管理的三种方法: 跳转页面 改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: <!doctype html> <html lang=&q ...

  7. Clipboard Action for Mac（智能剪贴板历史管理器）破解版安装

    1.软件简介    Clipboard Action 是 macOS 系统上一款智能剪贴板历史管理器,它允许剪贴板历史中的每一段内容执行操作.使用 AppleScript 或 Automator 工作 ...

  8. html5 - history 历史管理

    参考文章: w3c     :  http://www.w3.org/html/ig/zh/wiki/HTML5/history 张鑫旭  : http://www.zhangxinxu.com/wo ...

  9. 关于HTML5中hash部分API在历史管理，选项卡自动跳转中的一点使用

    在群里最近有人提到如何处理在页面跳转之后,想要直接定位到相对应的选项卡的选项上,比如首页有登录和注册两个按钮,而登录注册页面有一对选项卡分别对应的是登陆和注册,想要实现的功能是点击登陆去到登录页的登录 ...

随机推荐

  1. Android开发之Activity横竖屏切换生命周期重建问题

    当进行横竖屏切换的时候Activity的生命周期会重建,从而导致Activity崩溃等问题,为了避免这一问题,需要在AndroidManifest.xml文件中设置: <activity and ...

  2. Medial Queries的另一用法——实现IE hack

    众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用"\0","\"和"\9"来 ...

  3. UIButton快速点击，只执行最后一次

    button快速点击时,会导致,同一动作执行多次,常用解决办法: 第一种方法:推荐 //取消执行 [[self class] cancelPreviousPerformRequestsWithTarg ...

  4. [推荐] PNG压缩网站：TinyPNG

    问题场景 最近在做一些网站性能优化方面的工作. 部分小图转化为Base64与css同步下载,但几张比较大的图(100k~300k)就不太适合转成Base64了,转换后会更大,影响css下载速度: 但采 ...

  5. ActiveMQ入门

    ActiveMQ简介 概要 开源 JMS-compliant 消息中间件message-oriented middleware(MOM) 松耦合,相对于RPC的紧耦合 发送消息fire-and-for ...

  6. ReactNative 分享解决listView的一个郁闷BUG

    用ListView的时候,会出现一个非常傻bi的情况,就是render的时候,listView不显示,需要碰/滑一下才会显示. 一开始我在怀疑自己是不是布局哪里有冲突,改到哭都没发现布局有什么问题,直 ...

  7. zookeeper原理解析-服务器端处理流程

    1)处理器链 这部分内容我们主要讲解zookeeper请求在zookeeper server端的处理流程,对于不同角色的zookeeper具有不同的处理流程, ZookeepeerServer的sta ...

  8. bzoj2330: [SCOI2011]糖果

    2330: [SCOI2011]糖果 Time Limit: 10 Sec Memory Limit: 128 MB Description 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋友 ...

  9. ORA-00600: 内部错误代码

    运行时报ORA-00600: 内部错误代码, 参数:[qcsgpvc3],[],[],[],[],[],[],[],[],[],[],[]    ,上网搜了但大多数都不行.无心插柳柳成荫,就在无奈想要 ...

  10. SQL创建流水号

    创建流水号表 CREATE TABLE SystemSerialNo ( SerialNoId INT PRIMARY KEY IDENTITY, TableName VARCHAR(60), Pre ...