<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <input type="button" value="随机" id="btn1">

     <div id="div1"></div>

     <script>

     var oBtn = document.getElementById("btn1");

     var oDiv = document.getElementById("div1");

     var obj = {};

     oBtn.onclick = function(){

         var number = randomNum(35,7);

         oDiv.innerHTML = number;

         var oRD = Math.random();

         obj[oRD] = number;

         window.location.hash = oRD;

     };

     window.onhashchange = function(){

         //undefined时为空

         var number = obj[ window.location.hash.substring(1) ] || "";//去掉#

         oDiv.innerHTML = number;

     };

     function randomNum(alls,now){

         var arr = [];

         var newArr = [];

         for(var i = 1;i <= alls;i ++){

             arr.push(i);

         }

         for(var i = 0;i < now;i ++){

             //Math.random()   [0,1)

             //Math.floor( Math.random() * arr.length   0~34

             newArr.push( arr.splice(Math.floor( Math.random() * arr.length ),1) );//删除并返回被删除元素的数组

         }

         return newArr;//是一个二维数组

     }

     </script>

 </body>

 </html>

onhashchange的更多相关文章

  1. html5 历史管理onhashchange和state

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

  2. jQuery--index() window.onhashchange

    index(): 1. 如果没有参数传给该函数,那么就返回一个整数,为其相对于其兄弟节点的位置. 2. 如果在一个元素集合上调用该函数,并且传入的参数为一个DOM元素或jQuery对象,那么返回一个整 ...

  3. onhashchange事件，只需要修改hash值即可响应onhashchange事件中的函数（适用于上一题下一题和跳转页面等功能）

    使用实例: 使用onhashchange事件做一个简单的上一页下一页功能,并且当刷新页面时停留在当前页 html: <!DOCTYPE html><html><body& ...

  4. onhashchange事件--司徒正美

    onhashchange事件是针对AJAX无缝刷新导致后退键失效而产生的事件,因此属于一个够新的事件,浏览器兼容性如下: Feature Chrome Firefox IE Opera Safari ...

  5. 捕获浏览器的前进、后退事件 window.onhashchange 并区别于点击链接

    <html> <head> <meta http-equiv="content-type" content="text/html;chars ...

  6. 历史管理 onhashchange

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. History API与浏览器历史堆栈管理

    移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持o ...

  8. 如何快速开发SPA应用

    前言 web早已经进入了2.0时代了,如今的网页大有往系统应用级别的方向发展的趋势,再也不是以前的简单展示信息的界面了.如今很多webapp已经做到了原生应用的功能,并且运用自身的优势逐步取代之.HT ...

  9. 禁止页面后退JS（兼容各浏览器）

    <script src="${ctxPath}/media/lib/jquery.history.js"></script> <script> ...

随机推荐

  1. 硬件问题大杂烩&Coffee lake框图

    PCB阻抗控制 https://www.cnblogs.com/lifan3a/articles/6095372.html 1.高速差分信号串联AC耦合电容什么请况下要做镂空处理: (1)为了阻抗匹配 ...

  2. js的常用小技巧

    //类对象转成数组 var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));   ...

  3. rtems 4.11 部分m4文件分析

    本来想把configure.ac和各种m4文件分析明白,发现有点困难,不过好在也能理解一些. 基本教程 首先要明白m4,参见这个教程,写得不错,不论怎么样m4替换来替换去的,还真是不那么容易懂,好在我 ...

  4. Effective Java - [3. 对象通用方法]

    Item 10. 若覆盖equals方法,需要遵守规则

  5. 网页图表类框架（插件）——百度eCharts和Highcharts

    ECharts, 缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库, 可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /10 ...

  6. Jenkins：使用Git Parameter插件实现tag或分支的选择性构建

    Jenkins如何选择任意一个tag来构建代码 Jenkins如何选择任意一个branch(分支)来构建代码 苦恼了一段时间后,发现Git Parameter插件实现可以帮助我们来实现. 下面来介绍如 ...

  7. C打印函数printf的一种实现原理简要分析

    [0]README 0.1)本文旨在对 printf 的 某一种 实现 原理进行分析,做了解之用: 0.2) vsprintf 和 printf.c 的源码,参见 https://github.com ...

  8. poj 2151Check the difficulty of problems<概率DP>

    链接:http://poj.org/problem?id=2151 题意:一场比赛有 T 支队伍,共 M 道题, 给出每支队伍能解出各题的概率~  求 :冠军至少做出 N 题且每队至少做出一题的概率~ ...

  9. ast.literal_eval(jsonStr) json格式字符串转dict 2种方式

    json.loads(jsonStr, encoding='utf-8')import ast ast.literal_eval(jsonStr)

  10. JAVA中equals()与==的区别详解

    在进行判断操作时,常常会用到==或者equals()进行等价判断,那么两者究竟有什么区别呢,下面整理一下个人理解. 简单介绍: ==是一种引用相等性比较符,判断引用到堆上同一个对象的两个引用是相等的. ...