边看视频边做的练习，随机显示数字，分别使用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. javascript遍历select下拉框判断其中值是否与指定值相等

    用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的 ...

  2. iOS核心应用对象

    IOS应用之设计模式:模型-视图-控制器 iOS应用与其它应用的区别就在于它所管理的数据(和相应的业务逻辑)以及将数据展现给用户的方式.大多数UIKit对象并不定义应用而是帮助完善其行为.例如,你的应 ...

  3. POJ 1873 The Fortified Forest

    题意:是有n棵树,每棵的坐标,价值和长度已知,要砍掉若干根,用他们围住其他树,问损失价值最小的情况下又要长度足够围住其他树,砍掉哪些树.. 思路:先求要砍掉的哪些树,在求剩下的树求凸包,在判是否可行. ...

  4. C++应用程序在Windows下的编译、链接（一）概述

    C++应用程序在Windows下的编译.链接(一)概述 本文是对C++应用程序在Windows下的编译.链接的深入理解和分析,文章的目录如下: 我们先看第一章概述部分. 1概述 1.1编译工具简介 c ...

  5. Hadoop 统计文件中某个单词出现的次数

    如文件word.txt内容如下: what is you name? my name is zhang san. 要求统计word.txt中出现“is”的次数? 代码如下: PerWordMapper ...

  6. Haxe2.10到Haxe3，NME到OpenFL的迁移备忘

    终于决定正式向Haxe3和OpenFL迁移了,这期间也遇到不少问题,这里总结记录如下: 首先是Haxe3环境 * 因为还想保留Haxe 2.10的环境,因此没有使用官网的Haxe 3安装包,而是下载了 ...

  7. Python中BeautifulSoup中对HTML标签的提取

    一开始使用了beautifulSoup的get_text()进行字符串的提取,后来一直提取失败,并提示错误为TypeError: 'NoneType' object is not callable 返 ...

  8. Spring MVC 笔记 —— Spring MVC 文件上传

    文件上传 配置MultipartResolver <bean id="multipartResolver" class="org.springframework.w ...

  9. webStorm支持.wxml文件高亮显示

    微信小程序官方说明需要在微信开发者工具中开发运行,但这个工具着实不咋地. 我是使用webstrom编辑,然后在微信开发者工具中热加载查看效果,因为webstrom默认并不支持*.wxml,添加使用xm ...

  10. 集中式（CVS、SVN）VS分布式（Git）

    集中式版本控制系统,版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所以要先从中央服务器取得最新的版本,然后开始干活,干完活了,再把自己的活推送给中央服务器.中央服务器就好比是一个图 ...