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

  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. c++ float 带 e 的指数

    带e是指10的 e后面次方 #include <iostream> int main() { float f; f = 9.87654321f; std::cout << f ...

  2. 专题：php页面跳转方法

    php只有一种方法,利用JavaScript的window.location[和window.location.href效果相同]是一种方法,利用html的meta的Refresh是一种方法. 代码 ...

  3. git生成SSH key

    使用https:// 提交GitHub上的私有项目时,需要每次都输入帐号和密码,比较麻烦. 比如我自己的笔记本,在push的时候我可不想每次都输入这些. 那就使用SSH吧,这个需要在GitHub的帐号 ...

  4. [UVa1213]Sum of Different Primes（递推，01背包）

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  5. NPO与X7R、X5R、Y5V、Z5U神马的有啥区别

    主要是介质材料不同.不同介质种类由于它的主要极化类型不一样,其对电场变化的响应速度和极化率亦不一样. 在相同的体积下的容量就不同,随之带来的电容器的介质损耗.容量稳定性等也就不同.介质材料划按容量的温 ...

  6. SpringMVC 登陆判断

    struts2:extends ActionSupport @Override public String execute() throws Exception { User user = userS ...

  7. FLASH CC 2015 CANVAS 中 gotoAndStop、gotoAndPlay() 不起作用

    哎 话不多说先看我的代码: //舞台上 放着sp0.sp1....sp8,9个mc,每个mc都有几帧, //帧上有如下代码 var S=this; S.stop() inIt1();//not wor ...

  8. Yii javascript 的结合 账号禁用 激活 的设置。

    2014-02-16 控制器中的代码: public function actionUpdown(){ //print_r($_POST);die(); if(Buser::model()->u ...

  9. PHP爬虫抓取网页内容 (simple_html_dom.php)

    使用simple_html_dom.php,下载|文档 因为抓取的只是一个网页,所以比较简单,整个网站的下次再研究,可能用Python来做爬虫会好些. <meta http-equiv=&quo ...

  10. Android 使用finalBitmap实现缓存读取

    public class NewsApplication extends Application{ private FinalBitmap finalBitmap=null; public Final ...