1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script>
  7.  
  8. //onhashchange : 事件：当hash值有变化的时候，就会触发
  9.  
  10. window.onload = function(){
  11.     var oInput = document.getElementById('input1');
  12.     var oDiv = document.getElementById('div1');
  13.  
  14.     var obj = {};
  15.  
  16.     oInput.onclick = function(){
  17.  
  18.         var number = randomNum(35,7);
  19.  
  20.         oDiv.innerHTML = number;
  21.  
  22.         var oRD = Math.random();
  23.  
  24.         obj[oRD] = number;
  25.  
  26.         window.location.hash = oRD;
  27.  
  28.     };
  29.  
  30.     window.onhashchange = function(){
  31.         var number = obj[window.location.hash.substring(1)] || '';
  32.  
  33.         oDiv.innerHTML = number;
  34.     };
  35.  
  36.     function randomNum(alls,now){
  37.  
  38.         var arr = [];
  39.         var newArr = [];
  40.  
  41.         for(var i=1;i<=alls;i++){
  42.             arr.push(i);
  43.         }
  44.  
  45.         for(var i=0;i<now;i++){
  46.             newArr.push( arr.splice(Math.floor(Math.random()*arr.length),1) );
  47.         }
  48.  
  49.         return newArr;
  50.  
  51.     }
  52.  
  53. };
  54.  
  55. </script>
  56. </head>
  57.  
  58. <body>
  59. <input type="button" value="35选7" id="input1" />
  60. <div id="div1"></div>
  61. </body>
  62. </html>

历史管理 onhashchange的更多相关文章

  1. html5 历史管理onhashchange和state

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

  2. HTML5自学笔记[ 8 ]历史管理

    触发历史管理的三种方法: 跳转页面 改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: <!doctype html> <html lang=&q ...

  3. HTML5历史管理

    边看视频边做的练习,随机显示数字,分别使用history和hash来实现历史管理 <!doctype html> <html> <head> <meta ch ...

  4. html5 历史管理

    1.onhashchange:改变hash值来进行历史管理. <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  5. Clipboard Action for Mac（智能剪贴板历史管理器）破解版安装

    1.软件简介    Clipboard Action 是 macOS 系统上一款智能剪贴板历史管理器,它允许剪贴板历史中的每一段内容执行操作.使用 AppleScript 或 Automator 工作 ...

  6. pjax 历史管理 jQuery.History.js

    更新 http://www.bootcdn.cn/jquery.pjax/ 简介 pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接.网页标题.以及 ...

  7. html5 - history 历史管理

    参考文章: w3c     :  http://www.w3.org/html/ig/zh/wiki/HTML5/history 张鑫旭  : http://www.zhangxinxu.com/wo ...

  8. html5(历史管理）

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  9. HTML5历史管理状态机制

    前言:想要不刷新页面同时改变url 可以用HTML5 window对象的 hashChange 事件.同时介绍两个相关的api 和 1个事件. 两个API:1.history.pushState({n ...

随机推荐

  1. Ubuntu下对与rtl8723be网卡频繁断网问题解决

    linux下对于rtl系列的无线网卡,大多数网友都在吐槽,总是频繁的掉网,就此将自己在网上安装时的经验写下. 1.下载网卡驱动,其中包含rtl的大多数包 sudo apt-get install li ...

  2. [WIP]webpack 概念

    创建: 2019/04/09 概念    入口 指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始. 进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖 ...

  3. DLL中加载其它DLL使用LoadLibrary加载动态库失败的解决办法

    方式一 采用LoadLibraryEx 若DLL不在调用方的同一目录下,可以用LoadLibrary(L"DLL绝对路径")加载.但若调用的DLL内部又调用另外一个DLL,此时调用 ...

  4. 51nod1212【最小生成树kruskal算法】

    思路: 利用破圈法. #include <bits/stdc++.h> using namespace std; typedef long long LL; const int N=1e3 ...

  5. Codeforces714B【读题-水】

    题意: 给你n个数,然后让你自己选择X,先选择一些+一次:然后选择一些-一次. 思路: 首先要去判断是不是不需要处理或者处理一次的情况: 其实这样的话,你不可能选x然后最小和最大都加减一次,所以肯定是 ...

  6. 【书评】【不推荐】《TensorFlow：实战Google深度学习框架》（第2版）

    参考书 <TensorFlow:实战Google深度学习框架>(第2版) 这本书我老老实实从头到尾看了一遍(实际上是看到第9章,刚看完,后面的实在看不下去了,但还是会坚持看的),所有的代码 ...

  7. Java 时区（转）

    http://blog.csdn.net/wangpeng047/article/details/8560690

  8. shell学习（2）- sed

    一.替换(s) 详细用法  [address]s/pattern/replacement/flags 修饰flag的标志如下: 命令 说明 n 1到512之间的一个数字,表示文本模式中指定模式第n次出 ...

  9. [題解]（最短路）luogu_P2384最短路

    hack: 4 4 1 2 10000 2 3 10000 3 4 10000 1 4 10000 答案:13 不能邊最短路邊取模,因為取模后最大值不一定為原來最大值,所以利用log(m*n)=log ...

  10. 23 在java中使用groovy类

    1       在java中使用groovy类 1.1  直接调用groovy类 在java中调用Groovy类,需要增加Groovy运行时到java的classpath中. pom.xml < ...