边看视频边做的练习，随机显示数字，分别使用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. oracle exp、imp实现导出导入

    一.说明    oracle 的exp/imp命令用于实现对数据库的导出/导入操作; exp命令用于把数据从远程数据库服务器导出至本地,生成dmp文件; imp命令用于把本地的数据库dmp文件从本地导 ...

  2. ios搭建开发环境

    ios搭建开发环境 好久就想试水IOS开发了,由于开发环境限制,一直局限于理论和虚拟机,近来入手了MacBook Pro,也来尝尝鲜,笔者也是现学现总结,如果有不足,请指正. IOS开发必备MAC O ...

  3. 12、Python-网络编程

    1.套接字1.1 socket模块套接字是网络编程中的一个基本组件,一般包括服务器端套接字和客户端套接字. 创建服务器端过程如下: import socket s = socket.socket() ...

  4. win7 VS2008 ffmpeg release 版本崩溃 0x00905a4d 处未处理的异常

    这个坑, 我始终不相信编码的问题,但还是花了一上午加各种调试代码.一般加个断点,调试几下就知道是什么问题.在最后找不到解决办法的情况下google了一下,短短几分钟解决了这个问题. 程序都是踩着各种坑 ...

  5. VMwarevSphere 服务器虚拟化之二十九 桌面虚拟化之安装View副本服务器

    VMwarevSphere 服务器虚拟化之二十九  桌面虚拟化之安装View副本服务器 VMware View中高可用性可是一个必须要考虑的问题.在整个虚拟桌面环境中View Connection S ...

  6. Linux 内核源码中likely()和unlikely()

    ikely()与unlikely()在2.6内核中,随处可见,那为什么要用它们?它们之间有什么区别呢? 首先明确: if (likely(value))等价于if (value)if (likely( ...

  7. 简单的通讯录（C语言实现）

    通讯录实现的功能 --: .添加联系人 .删除联系人 .查找联系人 .修改联系人 .显示联系人 .清空通讯录 .按照姓名进行排序 .退出程序 该通讯录将联系人的信息保存在文件中 在VS2013中打开文 ...

  8. Mac下Android studio搭建Android开发环境【新手】

    上学期用的还是windows,这学期新入手了mac,突然也想装个Android studio来玩玩.安装过程中出现了问题,记录如下. 先是装安卓studio的下载链接,不推荐去官网装,这里提供一个挺好 ...

  9. 【转载】深入Java单例模式

    原文出处:http://devbean.blog.51cto.com/448512/203501 在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就 ...

  10. Python自学笔记——Matplotlib风羽自定义

    [前言]对于气象专业的小学生来说,风场是预报重要的参考数据,我们所知的风羽有四种:短线代表风速2m/s,长线代表风速4m/s,空心三角代表风速20m/s,实心三角代表风速50m/s.而matplotl ...