1、onhashchange:改变hash值来进行历史管理。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <input type="button" value="随机选择"  id="btn" />

         <div id="div1"></div>

     </body>

 </html>

 <script>

     window.onload = function(){

         var oBtn = document.getElementById("btn");

         var oDiv = document.getElementById("div1");

         window.json = {};

         oBtn.onclick = function(){

             var key = Math.random();

             var value = randomNum(35,7);

             json[key] = value;

             //oDiv.innerHTML = value;

             window.location.hash = key;

         }

         window.onhashchange = function(){

             var hashValue = window.location.hash.substring(1);

             if(!hashValue)return;

             oDiv.innerHTML = json[hashValue];

         }

     }

     function randomNum(totlaNum,resultNum){

         var totalArray = new Array();

         var resultArray = new Array();

         for(var i = 0 ;i < totlaNum;i++){

             totalArray.push(i);

         }

         for(var i = 1; i<= resultNum;i++){

             resultArray.push(totalArray.splice(Math.floor(Math.random()*totalArray.length),1));

         }

         return resultArray;

     }

 </script>

2、history+pushState+ popstate事件：需要在服务器下运行。网址是虚假的，需要服务器指定对应页面，否则刷新找不到页面。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <input type="button" value="随机选择"  id="btn" />

         <div id="div1"></div>

     </body>

 </html>

 <script type="text/javascript">

     window.onload = function(){

         var oBtn = document.getElementById("btn");

         var oDiv = document.getElementById("div1");

         window.json = {};

         oBtn.onclick = function(){

             var value = randomNum(35,7);

             //pushState接收三个参数 ：数据  标题(都没实现)  地址(可选)

             window.history.pushState(value,"");

             oDiv.innerHTML = value;

         }

         window.onpopstate = function(ev){

             oDiv.innerHTML = ev.state;

         }

     }

     function randomNum(totlaNum,resultNum){

         var totalArray = new Array();

         var resultArray = new Array();

         for(var i = 0 ;i < totlaNum;i++){

             totalArray.push(i);

         }

         for(var i = 1; i<= resultNum;i++){

             resultArray.push(totalArray.splice(Math.floor(Math.random()*totalArray.length),1));

         }

         return resultArray;

     }

 </script>

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

  1. HTML5历史管理

    边看视频边做的练习,随机显示数字,分别使用history和hash来实现历史管理 <!doctype html> <html> <head> <meta ch ...

  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. comdlg32.dll

    dll的应用,目前还不知道要怎么查看dll里的功能,暂且试着用了一个, 下面的Declare 分32位office软件和64位,如果是64位,要在Declare 后面加上PtrSafe ,定义的Typ ...

  2. 创建pod索引库（Specs）

    专门用来存放xxx.podspec 的索引文件的库就叫做索引库.我们需要将这些索引文件上传到远程索引库才能保证其他的人能够拿来用. 创建一个远程索引库和本地索引库对应起来,步骤如下: 1.登录开源中国 ...

  3. MATLAB仿真学习笔记（一）

    一.Simulink概述 1.特点 simulink是对动态系统进行建模.仿真和综合分析的图形化软件,可以处理线性和非线性.离散.连续和混合系统,也可以处理单任务和多任务系统,并支持多种采样频率的系统 ...

  4. Self-Attetion

    四.self-attention 1.是什么? attention机制通常用在encode与decode之间,但是self-attention则是输入序列与输出序列相同,寻找序列内部元素的关系即 K= ...

  5. 跟着alex学习了格式化输出，最大的感受就是编程这个事，一定要自己动手去做，才能学会。看会和自己会做完全是两码事

    学习了三天,现在学到格式化输出.看视频教程,alex和那个美女学员打情骂俏,真是羡慕啊. 教程看懂很容易,完全会了. 可是上手编程马上歇菜. 就这么几行的代码,我遇到了n多错误 首先是中文输入的错误, ...

  6. Centos 7开启网卡打开DHCP自动获取IP

    在Windows10上安装了CentOS7的Hyper-V虚拟机. 虽然配置了可访问外网的网卡(Win8.1 Hyper-V 共享本机IP上网),但是默认安装的CentOS是没有开启配置网卡信息的,也 ...

  7. 【DEBUG】 Visual Studio 2005 DEBUG集

    一. fatal error C1083: 无法打开包括文件:"stdint.h": No such file or directory stdint.h是c99标准的头文件,vc ...

  8. 刷新PHP缓冲区

    为你的站点加速_php技巧 在当前 PHP 版本的默认配置下,“输出缓冲(Output Buffering)”是被打开的.旧版本则不是这样,在旧版本的 PHP 中,字符串在每次被输出的时候(通过 ec ...

  9. nyoj_85_有趣的数_201312122130

    有趣的数 时间限制:3000 ms  |           内存限制:65535 KB 难度:2   描述 把分数按下面的办法排成一个数表. 1/1 1/2 1/3 1/4..... 2/1 2/2 ...

  10. 洛谷 P1378 油滴扩展

    P1378 油滴扩展 题目描述 在一个长方形框子里,最多有N(0≤N≤6)个相异的点,在其中任何一个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油滴扩展完 ...