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

  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. Oracle中如何使用REGEXP_SUBSTR函数

    REGEXP_SUBSTR函数格式如下: function REGEXP_SUBSTR(String, pattern, position, occurrence, modifier) __srcst ...

  2. 将linux默认python升级到2.7.4版本

    第一步:下载python2.7.4版本源码: wget http://python.org/ftp/python/2.7.4/Python-2.7.4.tgz 解压文件 [aa@localhost ~ ...

  3. ASP.NET简单登录注册实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  4. 【leetcode❤python】119. Pascal's Triangle II

    #-*- coding: UTF-8 -*-#杨辉三角返回给定行#方法:自上而下考虑问题,从给定的一行计算出下一行,则给定行数之后,计算的最后一行就是求解的最后一行class Solution(obj ...

  5. Android 进度条

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  6. 用ubuntu下载电影：磁力链接，torrent，迅雷链接

    用ubuntu下载电影:磁力链接,torrent,迅雷链接 操作系统:Ubuntu 14.04 64位 需要软件:Ktorent, Amule 安装软件: sudo apt-get install k ...

  7. DataTables warning : Requested unknown parameter '5' from the data source for row 0

    在该项目中我使用了jquery.dataTables.js来作为我的前端数据表格. 表格的官网地址:https://www.datatables.net/ 一.jsp部分代码片段如下: <tab ...

  8. Java——再看IO

    一.编码问题 utf-8编码中,一个中文占3个字节,一个英文占1个字节:gbk编码中,一个中文占2个字节,一个英文占1个字节. Java是双字节编码,为utf-16be编码,是说一个字符(无论中文还是 ...

  9. ASCII码对照表 (转)

    http://xahanjianxin.blog.163.com/blog/static/4458605720082215539592/ ASCII, American Standard Code f ...

  10. 函数对象适配器之ptr_fun的使用示例

    //============================================================================ // Name : CopyInts4.c ...