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

  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. android 串口调试

    在usb调试过程中,都会选择串口查看log,更希望在串口中输入命令查看相关状态.但是一般情况下串口调试时 进程用户是shell,即使你在adb shell下是root用户. 暴力方法是在 adroid ...

  2. MySql性能优化相关

    原来使用MySql处理的数据量比较少,小打小闹的,没有关注过性能的问题.最近要处理的数据量飙升,每天至少20W行的新增数据,导致MySql在性能方面已经是差到不可用的地步了,必须要重视MySql的优化 ...

  3. Linux curl命令参数详解

    笔者出处:http://www.aiezu.com/system/linux/linux_curl_syntax.html linux curl是通过url语法在命令行下上传或下载文件的工具软件,它支 ...

  4. zoj 1081 判断点在多边形内

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=81Points Within Time Limit: 2 Second ...

  5. Http协议简单学习笔记

    HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程. 在HTTP1.0 ...

  6. 学习笔记day6：position index结合

    z-index属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack o ...

  7. (十)Linux内核中的常用宏container_of

    Container_of在Linux内核中是一个常用的宏,用于从包含在某个结构中的指针获得结构本身的指针,通俗地讲就是通过结构体变量中某个成员的首地址进而获得整个结构体变量的首地址. Containe ...

  8. D3.js 理解 Update、Enter、Exit

    Update.Enter.Exit 是 D3 中三个非常重要的概念,它处理的是当选择集和数据的数量关系不确定的情况. 一.什么是 Update.Enter.Exit svg.selectAll(&qu ...

  9. gradle资料

    <Gradle用户教程>中文版 · GitBookhttps://www.gitbook.com/book/yeetrack/-gradle-user-guide-chinese/deta ...

  10. haskell rust相关文章

    Combining Rust and Haskell http://tab.snarc.org/posts/haskell/2015-09-29-rust-with-haskell.html