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. MyBatis入门2_增删改查+数据库字段和实体字段不一致情况

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! 当数据库字段和实体bean中属性不一致时 之前数据库P ...

  2. C# textbox 获得焦点

    this.ActiveControl = txt_core;

  3. Mysql 之主从复制，mysql-proxy读写分离

    准备两台mysql服务器,master(192.168.43.64).slave(192.168.84.129) master配置: log-bin=mysql-bin binlog_format=m ...

  4. JNI数组操作

    在Java中数组分为两种: 1.基本类型数组 2.对象类型(Object[])的数组(数组中存放的是指向Java对象中的引用) 一个能通用于两种不同类型数组的函数: GetArrayLength(ja ...

  5. CAD绘制一个线型标注（com接口VB语言）

    主要用到函数说明: _DMxDrawX::DrawDimRotated 绘制一个线型标注.详细说明如下: 参数 说明 DOUBLE dExtLine1PointX 输入第一条界线的起始点X值 DOUB ...

  6. js里的深度克隆

    ES6 数组克隆 let arr = [1,2,3,4,5]; let arr1 = [...a]; arr1 = ["a","b","c" ...

  7. PostgreSQL使用总结

    最近项目用到了PostgreSQL数据库,网上一堆教程,这里自己整理一下做个笔记: 1,下载安装,我这边安装在Windows7,在这里找到大象一样的标志: 2,双击打开,这里的话按流程直接走: 3,这 ...

  8. vue 微信授权解决方案

    背景 前后端分离项目 - SpringSocial 绑定与解绑社交账号如微信.QQ2018-08-14更新时隔四个月第一次更新,因为项目重构有一次接触到了微信授权,思路已经比原来清晰的多了,将重新修改 ...

  9. 20170622-编译Uboot错误

    参照:http://docs.widora.io/zh/uboot编译 Assembler messages:Error: unknown architecture `4kc' Error: unre ...

  10. 关于框架搭建-web

    最近一直在学习前端相关的东西,在学了一堆基础可以以及动手在某个前端框架上写了一些东西之后,我想尝试着开始自己搭建一个框架.不知道时间需要多久,但会持续更新.小菜鸟的成长记录. ------------ ...