边看视频边做的练习，随机显示数字，分别使用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. SpringMVC入门笔记一

    SpringMVC优势    性能比struts2好    简单 便捷 易学    和Spring无缝集成(使用spring ioc aop)    约定优于配置    能够简单进行Junit测试   ...

  2. this关键字、访问修饰符、super关键字

    this关键字.访问修饰符.super关键字 Java关键字this只能用于方法方法体内,而且只能用在非静态方法内.当一个对象创建后,Java虚拟机(JVM)就会给这个对象分配一个引用自身的指针,这个 ...

  3. 关于code reivew

    关于code reivew 先谈谈三个code review的关键因素: 一.创建review要简单 code reivew是一个程序员日常工作中经常做的一件事,理论上来讲,任何一个将要submit到 ...

  4. Ubuntu13.04使用Mesa

    3年前写过一些关于如何使用Mesa的文章,如今再试.有些东西已经变了. 首先安装: sudo apt-get install libgl1-mesa-dev sudo apt-get install ...

  5. 史上最“脑残”的“抢火车票”程序（node.js版）

    [背景] 快过年了,我妈一个电话打过来叫我给他买火车票,我到12306一查,硬座和硬卧基本没有了,高铁又太贵. 最后只抢了3张无座票,但是我妈说能不能买有座位的啊,我说没有了啊,我妈:你过两天再帮我看 ...

  6. [ios-必看] IOS调试技巧：当程序崩溃的时候怎么办 iphone IOS

    from:http://article.ityran.com/archives/1143 有这样一种情形:当我们正在快乐的致力于我们的app时,并且什么看都是无比顺利,但是突然,坑爹啊,它崩溃了.(悲 ...

  7. 读headFirst设计模式 - 策略模式

    有些人已经解决你的问题了 什么是设计模式?我们为什么要使用设计模式?怎样使用?按照书上的说法和我自己的理解,我认为是这样的:我们遇到的问题其他开发人员也遇到过,他们利用他们的智慧和经验将问题解决了,把 ...

  8. Kubernetes(k8s)容器运行时(CRI)

    Kubernetes节点的底层由一个叫做"容器运行时"的软件进行支撑,它负责比如启停容器这样的事情.最广为人知的容器运行时当属Docker,但它不是唯一的.事实上,容器运行时这个领 ...

  9. OO的五大原则：SRP、OCP、LSP、DIP、ISP

    OO的五大原则是指SRP.OCP.LSP.DIP.ISP. SRP -- (Single Responsibility Principle 单一职责原则) OCP--开闭原则(Closed for M ...

  10. vue.js之个人总结

    1.MVVM模式 MVVM模式(Model-View-ViewModel)的运作如下图: 1)上图解析:ViewModel是Vue.js的核心,它是一个Vue实例.Vue实例是作用于某一个HTML元素 ...