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. Node.js概述

    Node.js最重要的特性:通过单线程实现异步处理环境 Node.js解决的问题: Node.js修改了客户端连接服务器端的连接方法,不需要为每个客户端连接创建一个新的线程,而是为每个客户端连接触发一 ...

  2. 项目关联到svn

    最近因为要升级项目,改用64位的eclipse,原先已经被svn管理的项目需要被复制到另一个工作空间,只需要导入并复制项目到新的工作空间即可 右键,点import 选择已经存在的项目导入工作空间 选择 ...

  3. Python 之动态添加属性以及方法

    import types class Person(object): def __init__(self, newName, newAge): self.name = newName self.age ...

  4. Git学习总结二（版本回退）

    修改修改仓库中readme.txt文件,然后用git status命令看看结果: $ git status On branch master Changes not staged for commit ...

  5. PAT_A1018#Public Bike Management

    Source: PAT A1018 Public Bike Management (30 分) Description: There is a public bike service in Hangz ...

  6. @Override注解

    @Override注解对于代码可读性的提升十分巨大 而且良好的可读性是一个优秀程序员必备的基础素养

  7. vue项目的路由配置

    方案一.在生成项目的时候就选择安装路由; 这个地方选择y即可; 生成项目之后在src目录下会有router文件夹,里面有index.js,并且里面已经存在一个helloWorld页面了,可以直接模仿着 ...

  8. Problem 21

    Problem 21 https://projecteuler.net/problem=21 Let d(n) be defined as the sum of proper divisors of  ...

  9. hadoop在线重启namenode+在线扩展集群

    1.执行步骤 修改dfs.namenode.handler.count=150 () NameNode 有一个工作线程池用来处理客户端的远程过程调用及集群守护进程的调用.处理程序数量越多意味着要更大的 ...

  10. Divisible Group Sums

    Divisible Group Sums Given a list of N numbers you will be allowed to choose any M of them. So you c ...