触发历史管理的三种方法：

  1. 跳转页面
  2. 改变hash值
  3. pushState（在服务器环境下运行）

用hash值来触发历史管理：

 <!doctype html>
 <html lang="en">
 <head>
 <title>随机产生彩票号码</title>
 <meta charset="utf-8"/>
 <script>
 window.onload = function(){
     var oInput = document.getElementById('input1');
     var oDiv = document.getElementById('div1');
     var json = {};

     oInput.onclick = function(){
         var result = randomNum(35,7);
         var num = Math.random();
         json[num] = result;
         oDiv.innerHTML = result;
         window.location.hash = num;
     }

     window.onhashchange = function(){
         if(!this.location.hash.length){
             oDiv.innerHTML = '';
             return;
         }
         oDiv.innerHTML = json[this.location.hash.substring(1)];
     }

 }

 function randomNum(allNum,selNum){
     var arr = [];
     var newArr = [];
     for(var i=0;i<allNum;i++){
        arr.push(i+1);
     }
     for(var j=0;j<selNum;j++){
         newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
     }
     return newArr;
 }

 </script>

 </head>

 <body>
 <input type="button" id="input1"  value="随机选号"/>
 <div id="div1"></div>

 </body>

 </html>

用pushState来触发历史管理：

 <!doctype html>
 <html lang="en">
 <head>
 <title>随机产生彩票号码</title>
 <meta charset="utf-8"/>
 <script>
 window.onload = function(){
     var oInput = document.getElementById('input1');
     var oDiv = document.getElementById('div1');
     oInput.onclick = function(){
         var result = randomNum(35,7);
         oDiv.innerHTML = result;

         history.pushState(result,'',Math.random());　　//三个参数，第一个参数是保存的值，第二个参数是title（并无用），第三个参数用来设置url

     }

     window.onpopstate = function(ev){
         oDiv.innerHTML = ev.state;
     }

 }

 function randomNum(allNum,selNum){
     var arr = [];
     var newArr = [];
     for(var i=0;i<allNum;i++){
        arr.push(i+1);
     }
     for(var j=0;j<selNum;j++){
         newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
     }
     return newArr;
 }

 </script>

 </head>

 <body>
 <input type="button" id="input1"  value="随机选号"/>
 <div id="div1"></div>

 </body>

 </html>

HTML5自学笔记[ 8 ]历史管理的更多相关文章

  1. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  2. HTML5自学笔记[ 10 ]简单的购物车拖拽

    用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta ...

  3. HTML5自学笔记[ 9 ]HTML5实现元素的拖放

    要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素:这两个元素在拖放过程中都会触发不 ...

  4. Html5 自学笔记

      1 html的全称 Hyper Text Markup Language 2 HTML的意义 使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗 是 4 <html ...

  5. HTML5自学笔记[ 24 ]canvas绘图之星空草地

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. HTML5自学笔记[ 23 ]canvas绘图基础7

    变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.

  7. HTML5自学笔记[ 15 ]canvas绘图基础6

    关于线条的一些属性: lineCap,这个属性表示的是线条两端的样式,值有butt(默认)/round/square. lineJoin,这个属性表示线条相交的方式,值有miter(默认)/bevel ...

  8. HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. acdream1197 Points In Cuboid

    题目链接:http://acdream.info/problem?pid=1197 题意:给出一些点.每次给出一个长方体,问在长方体中的点的个数. 思路:kd-tree. const int N=11 ...

  2. CodeForces 219B Special Offer! Super Price 999 Bourles!

    Special Offer! Super Price 999 Bourles! Time Limit:1000MS     Memory Limit:262144KB     64bit IO For ...

  3. sqlite中的自增主键

    http://stackoverflow.com/questions/8519936/sqlite-autoincrement-primary-key-questions I'm not sure w ...

  4. V-rep学习笔记：机器人逆运动学数值解法（Cyclic Coordinate Descent Method）

    When performing inverse kinematics (IK) on a complicated bone chain, it can become too complex for a ...

  5. 将客户端将IE9强制为IE7

    有时候由于浏览器的问题我们在IE7中开发的东西需要在IE9中展示 但是会出现兼容性的问题. 那么我们可以同技巧将用户端的浏览器强行以IE7的文档模式展示我们的网页 下面是针对iis asp.net程序 ...

  6. iOS - OC 与 Swift 互相操作

    前言 在 Swift 语言中,我们可以使用 Objective-C.C 语言编写代码,我们可以导入任意用 Objective-C 写的 Cocoa 平台框架.Objective-C 框架或 C 类库. ...

  7. iOS - KVC 键值编码

    1.KVC KVC 是 Key-Value Coding 的简写,是键值编码的意思,属于 runtime 方法.Key Value Coding 是 cocoa 的一个标准组成部分,是间接给对象属性设 ...

  8. Redis核心知识之—— 时延问题分析及应对、性能问题和解决方法【★★★★★】

    参考网址: Redis时延问题分析及应对:http://www.cnblogs.com/me115/p/5032177.html Redis常见的性能问题和解决方法:http://www.search ...

  9. Oracle的热备份

    一. 什么是热备份 热备份也叫联机备份,它是指数据库处于open状态下,对数据库的数据文件.控制文件.参数文件.密码文件等进行一系列备份操作(其中数据文件是必须备份的). 它要求数据库处在归档模式下. ...

  10. uva 11728 Alternate Task

    vjudge 上题目链接:uva 11728 其实是个数论水题,直接打表就行: #include<cstdio> #include<algorithm> using names ...