边看视频边做的练习，随机显示数字，分别使用history和hash来实现历史管理

<!doctype html>
<html>
<head>
    <meta charset="utf-8" >
    <title>随机显示数字</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #btn1,#div1{
            margin: 10px;
        }
    </style>
</head>
<body>
    <input type="button" value="请随机选择" id="btn1" />
    <div id="div1"></div>
    <script type="text/javascript">
    // history，需在服务器下运行
    window.onload = function(){
        var oBtn1 = document.getElementById('btn1');
        var oDiv1 = document.getElementById('div1');

        oBtn1.onclick = function(){

            var arr = randomNum(35,7);

                history.pushState(arr,'',arr); // 三个参数，数据、标题（没有效果）、地址（可选）

                oDiv.innnerHTML = arr; 

            }

            window.onpopstate = function(ev){
                oDiv.innnerHTML = ev.state; // popstate事件，读取数据 event.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;
            }

        }

        //onhashchange通过改变hash值来管理
        window.onload = function(){
            var oBtn1 = document.getElementById('btn1');
            var oDiv1 = document.getElementById('div1');
            //var json = {};

            oBtn1.onclick = function(){

                var arr = randomNum(35,7);
                var num = Math.random();
                json[num] = arr;
                oDiv1.innerHTML = arr;
                window.location.hash = num;

            }

            window.onhashchange = function(){
                oDiv1.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>
</html>

HTML5历史管理的更多相关文章

  1. html5 历史管理

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

  2. HTML5历史管理状态机制

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

  3. html5 历史管理onhashchange和state

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. html5(历史管理）

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

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

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

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

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

  7. html5 - history 历史管理

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

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

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

  9. pjax 历史管理 jQuery.History.js

    更新 http://www.bootcdn.cn/jquery.pjax/ 简介 pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接.网页标题.以及 ...

随机推荐

  1. Lazy<T>

    Lazy<T> 对象的创建方式,始终代表了软件工业的生产力方向,代表了先进软件技术发展的方向,也代表了广大程序开发者的集体智慧.以new的方式创建,通过工厂方法,利用IoC容器,都以不同的 ...

  2. javascript计算字符串中出现最多的字符和个数

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

  3. win8商店应用验证，二进制文件是在调试模式下生成的解决方案。

    程序是在release模式下生成的,并且arm和x64通过了验证,但是x86就出现了这个奇葩问题. 搞了半天发现是要把“优化代码”的选项勾上.

  4. 34. LotusScript中的错误处理程序

    错误处理程序是所有严肃的程序的必要部分.但是在Lotus Notes开发中,很多程序员编写LotusScript代码时,并没有写专门的错误处理代码的习惯.这能够行得通,主要是因为LotusScript ...

  5. 结构-行为-样式-Jquery实现延迟加载特效（数据缓冲特效）

    最近在做一个地产项目的过程中,原来用的延迟加载的插件在IE下会使浏览器突然缩小,这个让客户很不满意,于是就考虑到兼容性的问题决定自己写一个插件.思路:定义一个代码块,手动加载到页面,然后手动删除.   ...

  6. Windows下安装Redmine-2.5.3

    安装准备 服务器操作系统:Windows Server 2008 R2 Standard,64位操作系统. RailsInstaller版本:2.2.4  (下载地址http://railsinsta ...

  7. 一、spark入门之spark shell：wordcount

    1.安装完spark,进入spark中bin目录: bin/spark-shell   scala> val textFile = sc.textFile("/Users/admin/ ...

  8. 【成长之路】【python】python基础1

    1.python的优点 高级语言:不需考虑底层实现的细节 可移植性:python程序不需经过任何修改就可以在所有的平台系统上运行 可扩展性:可以把用c和c++实现的代码嵌到python中 可嵌入性:可 ...

  9. git stash让bug来的更猛烈些吧

    git stash可以用来暂存当前正在进行的工作,比如想pull最新的代码,又不想加新commit, 或者有一个紧急的bug需要修复,但是这个bug又与你已经在做的工作(还没完成)有关联.这个时候有的 ...

  10. Socket编程中的长连接、短链接以及心跳包机制详解

    参考:http://blog.csdn.net/zdwzzu2006/article/details/7723738 一.定义 1.TCP连接 当网络通信时采用TCP协议时,在真正的读写操作之前,se ...