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. vs Could Not Connect

    解决,   在win7上卸载IIS 10.0 Express ,安装 IIS7.5 Express

  2. wpf绑定静态变量，模拟rem单位

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...

  3. .net 程序集加载，版本不匹配的解决方法

    经常有些时候,A.dll引用的是Microsoft.EntityFrameworkCore.dll version=1.0.0.0 publicKeyToken="adb9793829dda ...

  4. Linux 下phpstudy的安装使用补充说明

    (1)使用方法 在终端中使用sudo 或者 使用管理员账号运行 phpstudy start 开启 (2)命令列表: phpstudy start | stop | restart        开启 ...

  5. Java中“==”、“compareTo()”和“equals()”的区别

    在比较两个对象或者数据大小的时候,经常会用到==.compareTo()和equals(),尤其是在接入了Comparable接口后重写compareTo方法等场景,所以我们来理一下这三个的区别. 1 ...

  6. uva 1586 Molar mass(Uva-1586)

    这题做的相当的复杂...之前做的现在应该能简单一点了写的. 我的代码: #include <bits/stdc++.h> using namespace std; main() { int ...

  7. models中，对于(Small)IntegerField类型字段的choices参数在前端的展示

    # models.py class UserInfo(models.Model): gender_choices = ( (1, "男"), (2, "女"), ...

  8. vuejs验证码

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ...

  9. 小记——GTMD校园网

    前言 学校一年前开通了校园网,然鹅信号未覆盖我们住的公寓,又多忍受了一年的小破宽带(10M带宽,100块300个小时) 上个星期,架设了一年的校园网终于通了,然后我们发现——校园网69元一个月,一个用 ...

  10. Android颜色透明度数值一览

    100% — FF 95% — F2 90% — E6 85% — D9 80% — CC 75% — BF 70% — B3 65% — A6 60% — 99 55% — 8C 50% — 80 ...