<!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. Java反射机制

    Java反射机制 一:什么事反射机制 简单地说,就是程序运行时能够通过反射的到类的所有信息,只需要获得类名,方法名,属性名. 二:为什么要用反射:     静态编译:在编译时确定类型,绑定对象,即通过 ...

  2. WebApp 九宫格抽奖简易demo

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...

  3. EF 二级缓存 EFSecondLevelCache

    EFSecondLevelCache ======= Entity Framework .x Second Level Caching Library. 二级缓存是一个查询缓存.EF命令的结果将存储在 ...

  4. Beta版本冲刺第二天

    Aruba 408 409 410 428 429 431 完成任务: 分类界面,点击新建弹出输入名字的对话框,确定和取消按钮预留intent 添加通过分享保存到本应用的入口 立会照片: 燃尽图: c ...

  5. x509数字证书导入-然后删除自身

    这种程序的使用场景,需要给客户一个证书,但不能把证书直接给他让他安装,程序中需要用到给客户的私钥,但又不允许客户将这个证书再去授权给其它人. 重点并不是代码,是如何对用户隐藏需要添加的资源 ,以文本为 ...

  6. NodeJS 学习总结 01 安装配置

    1 安装NodeJS 具体参考已发布的文章Ubuntu学习总结-07 Nodejs和npm的安装 2 使用淘宝 NPM 镜像 国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像 ...

  7. [Tip]重写PanGestureRecognizer

    目标 识别当前pan方向是指定方向 需要API 重写- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event; 获取所在view ...

  8. HDU 4081Qin Shi Huang's National Road System（次小生成树）

    题目大意: 有n个城市,秦始皇要修用n-1条路把它们连起来,要求从任一点出发,都可以到达其它的任意点.秦始皇希望这所有n-1条路长度之和最短.然后徐福突然有冒出来,说是他有魔法,可以不用人力.财力就变 ...

  9. Python学习笔记（1)

    001 #通过bat命令运行pyhon py文件,并将结果输出到txt文件.# D:\ResearchContent\Exercise_Programm\Start\Start.py>C:\Us ...

  10. 深入理解JS的闭包

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域 ...