<!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是怎样绘制视图的

    原文:How Android Draws Views 当一个Activity获取到焦点的时候,它的布局就开始被绘制. 绘制的过程由Android framework处理.但布局层级的根节点必须由Act ...

  2. commons configuration管理项目的配置文件

    Commons Confifutation commons configuration可以很方便的访问配置文件和xml文件中的的内容.Commons Configuration 是为了提供对属性文件. ...

  3. Servlet-Cookie源码分析 源码环境：Tomcat8

    最近在学习servlet的一些实现细节,阅读了Cookie的源码. Cookie本质上是服务器发送给客户端(主要是浏览器)的一个会话临时数据. 其源码注释文档的说明: Creates a cookie ...

  4. oschina代码仓库远程push，pull免密实操总结

    刚做项目,用到开源中国(oschina)的git仓库,一个多月一直在痛苦的反复输密码的过程中度过.中间配置过几次免密登录,但总是时而登的上去,时而不行,大多数情况不行.近几日项目做完了,正好有空把这个 ...

  5. 关系数据库—SQL学习笔记

    SQL的特点: 综合统一 高度非过程化(存取路径的选择以及SQL的操作过程由系统自动完成) 面向集合的操作方式,以同一种语法结构提供多种使用方法(可以在终端键盘上直接键入SQL命令对数据库进行操作,也 ...

  6. 利用django创建一个投票网站（二）

    创建你的第一个 Django 项目, 第二部分 这一篇从第一部分(zh)结尾的地方继续讲起.本节我们将继续写 Web 投票应用,并主要关注 Django 提供的自动生成的管理页面(admin site ...

  7. AngularJS +HTML Demo

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  8. margin（）与offset（）的区别

    margin() 简写属性在一个声明中设置所有外边距属性. offset() 方法返回或设置匹配元素相对于文档的偏移(位置).

  9. prefix pct文件配置Xcode

    1.查看项目的各个文件夹下的文件名称: 2.配置如下图:需要添加$(SRCROOT)/项目的名称/pch所在文件夹路径 .易于理解方便那些初学者,下载别人的demO运行时遇到这样的类似的问题噢.< ...

  10. Android 热修复方案Tinker

    转自:http://blog.csdn.net/l2show/article/details/53925543 Android 热修复方案Tinker(一) Application改造 Android ...