<!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正则表达式入门——转自RUNOOB.COM

    Java 正则表达式 正则表达式定义了字符串的模式. 正则表达式可以用来搜索.编辑或处理文本. 正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别. Java正则表达式和Perl的是最为相似 ...

  2. ROS中DDNS的使用

    一.通过tool fetch更新ddns,关于此命令的使用,参考 tool fetch Scripts中添加脚本/tool fetch url="http://www.51kwl.com/? ...

  3. wpf 后台比例设置高度

    ColumnDefinition cd0 = new ColumnDefinition(); cd0.Width = new GridLength(2, GridUnitType.Star); txt ...

  4. 样式重置 css reset

    新浪的初始化: html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img { ; padding: 0 } fi ...

  5. RN中listView的每个item等高

    今天写ListView的每个Item的布局的时候发现,当文字太长时被截掉了不能完全显示,检查了很久发现没有设置固定高度都是可伸缩的为什么没有伸缩呢.看了很久才发现每个item是等高的,于是仔细检查才看 ...

  6. 罗马数字转整数Leetcode13

    该题较为简单,但是需要知道罗马数字的表示以及取值.用了一下map,其实之前没用过,但仔细看了一下跟python的字典实际上差不多,扫了一遍函数就直接可以用了. class Solution { pub ...

  7. Android基础测试题(四)

    看了前两道题大家有没有发现,测试题少了(一),大家猜猜测试题(一)是什么? Android基础测试题(四): 需求: 建一个方法,格式化输出2016-11-14 10:15:26格式的当前时间,然后截 ...

  8. linux安装adb

    本文只针对centOS6.8,其他版本未测试 1.下载adb包 下载android sdk for linux(http://tools.android-studio.org/index.php/sd ...

  9. 关于闭包（closure）的一些概念

    和其他大多数现代编程语言一样,JS也采用词法作用域,也就是说,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的.为了实现这种词法作用域,JS函数对象的内部状态不仅包含 ...

  10. matlab画图函数plot()/set/legend

    简单plot()/legend/XY轴范围axis 除了坐标轴信息外还可以添加其它的信息,如所画曲线的信息等:测试代码如下 x=0:pi/20:2*pi; y1=sin(x); y2=cos(x); ...