<!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. C# 提交网页请求时出现如下错误: System.Net.WebException: 操作超时

    原因一: 连接超时时间 Timeout 以及写入Post数据超时时间 ReadWriteTimeout 设置得太短,一般要设置大于6000ms. 原因二: Expect100Continue 属性的值 ...

  2. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  3. 【Kindle】pdf转mobi适合kindle查看格式

    pdf转mobi适合kindle查看格式 1.用到软件:福昕风腾PDF套件,切白边,PDF-Viewer,导出png图片ChainLP,图片转换为mobi文件<期间要下载kindlegen.ex ...

  4. nodeJs 5.0.0 安装配置与nodeJs入门例子学习

    新手学习笔记,高手请自动略过 安装可以先看这篇:http://blog.csdn.net/bushizhuanjia/article/details/7915017 1.首先到官网去下载exe,或者m ...

  5. C#知识点记录

    用于记录C#知识要点. 参考:CLR via C#.C#并发编程.MSDN.百度 记录方式:读每本书,先看一遍,然后第二遍的时候,写笔记. CLR:公共语言运行时(Common Language Ru ...

  6. TCP/IP中链路层的附加数据(Trailer数据)和作用

    1.TCP/IP中链路层的附加数据是什么 在用wireshark打开报文时,链路层显示的Trailer数据就是附加数据,如图 2.如何产生 1.例如以太网自动对小于64字节大小的报文进行填充(未实验) ...

  7. Nginx配置SSL证书部署HTTPS网站

    1.购买ssl证书 购买网站:沃通 2.上传证书到nginx服务器,然后进行解压. 解压后的的效果: [root@bubidev-ng3 nginx]# pwd/etc/nginx [root@bub ...

  8. 在thinkphp中js文件添加路径

    JS文件不认识__URL__这些tp独特的链接,所以要自己重新定义url,才能使用这些路径. 在js对于的模板上定义url 然后在js文件中引用

  9. 三、基于hadoop的nginx访问日志分析--计算时刻pv

    代码: # cat pv_hour.py #!/usr/bin/env python # coding=utf-8 from mrjob.job import MRJob from nginx_acc ...

  10. 阿里云提示：对输入参数id未进行正确类型转义，导致整型注入的发生

    类似以下提示: XXX.php中,对输入参数id未进行正确类型转义,导致整型注入的发生 解决办法: 找到对应文件:$id = $_GET['id']; 增加以下标红过滤: $id = $_GET['i ...