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. 03--QT教程（转自：豆子）

    http://blog.51cto.com/zt/20

  2. Centos6.6 安装nfs网络文件系统

    一.介绍 nfs网络文件系统的,大部分用在内网文件共享,比如,对集群上传文件做共享,经常用在图片部分,当然数据量大了还是要做分离,做为专门的接口比较好,介绍一下基本安装环境: 1)Cnetos6.6 ...

  3. HDU_1023_Train Problem II_卡特兰数

    Train Problem II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  4. js获得子节点, 获得tab转json值

    //提取表格的值,JSON格式 function GetTableData(table) { var tableData = new Array(); //创建数组 alert("行数:&q ...

  5. PHP控制反转（IOC）和依赖注入（DI

    <?php class A { public $b; public $c; public function A() { //TODO } public function Method() { $ ...

  6. ES6学习历程(变量的声明)

    2019-01-25: 一:变量的声明: 1.对于变量的声明添加了let,const两种方式 关于let: (1)不存在变量提升--必须先声明再使用; (2)会出现暂时性死区--在一个方法外用var声 ...

  7. 阅读《JavaScript设计模式》第二章心得

    面向对象编程 面向对象编程就是将你的需求抽象成一个对象.然后针对这个对象分析其特征(属性)与动作(方法).这个对象我们称之为类.面向对象编程思想其中的一个特点就是封装. 1.私有属性.私有方法.特权方 ...

  8. android 彩信附件添加删除

    http://blog.csdn.net/yuzhu_guan2012/article/details/6679154

  9. Java基础学习总结（69）——匿名内部类与Lambda表达式

    前言 Java Labmda表达式的一个重要用法是简化某些匿名内部类(Anonymous Classes)的写法.实际上Lambda表达式并不仅仅是匿名内部类的语法糖,JVM内部是通过invokedy ...

  10. 像 IDE 一样使用 vim

    本文转载自:https://github.com/yangyangwithgnu/use_vim_as_ide ##[目录] 0 vim 必知会........0.1 .vimrc 文件....... ...