<!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. 解决opencv无法读AVI视频的问题

    原文来自:http://blog.csdn.net/yeqiu712/article/details/6220030 其实AVI只是一个外壳.里面的东西可不一样的! 问题:为什么我的电脑支持AVI或者 ...

  2. linux uart驱动——uart platfrom 注册（三）

    一:注册platform device 注册一个platfrom device一般需要初始化两个内容,设备占用的资源resource和设备私有数据dev.platfrom_data.设备的resour ...

  3. Unix环境高级编程——守护进程记录总结(从基础到实现)

    一.概念及其特征 守护进程是系统中生存期较长的一种进程,常常在系统引导装入时启动,在系统关闭时终止,没有控制终端,在后台运行.守护进程脱离于终端是为了避免进程在执行过程中的信息在任何终端上显示并且进程 ...

  4. 源码编译mysql 5.5+ 安装过程全记录

    前言:从mysql 5.5版本开始,mysql源码安装开始使用cmake了,编译安装跟以前的版本有点不一样了. 一,安装步骤: 1.安装前准备工作 a.下载mysql源代码包,到mysql下载页面选择 ...

  5. mvn deploy

    mvn:deploy在整合或者发布环境下执行,将最终版本的包拷贝到远程的repository,使得其他的开发者或者工程可以共享. 以将ojdbc14传到nexus中的thirdparty为例 一 配置 ...

  6. ArcGIS api for javascript 离线部署

    一.说明: 1.本篇文章以及之后的相关的文章所使用的ArcGIS API for javascript 的版本是3.3.初学者为了学习简单,可以引用在线的 Javascript.但是如果只能连接内网, ...

  7. 【题解】P2602[JZOI2010]数字计数

    [题解][P2602ZJOI2010]数字计数 乍看此题,感觉直接从数字的位上面动手,感觉应该很容易. 但是仔细看数据范围,发现如果不利用计数原理,肯定会超时,考虑数码出现的特征: \(A000\)到 ...

  8. MySQL——事务

    核心知识: 1.什么是事务?一组原子性的SQL查询语句 2.事务的四种属性:ACID 3.四种隔离级别:读取未提交内容.读取提交内容.重复读.串行化. 4.什么是幻读?幻读有那些解决办法?连续读取同一 ...

  9. CountDownLatch，CyclicBarrier,Semaphore的使用

    什么时候使用CountDownLatch CountDownLatch原理和示例 Semaphore信号量的原理和示例 CyclicBarrier的用法 CyclicBarrier 和 CountDo ...

  10. Java for LeetCode 084 Largest Rectangle in Histogram【HARD】

    For example, Given height = [2,1,5,6,2,3], return 10. 解题思路: 参考Problem H: Largest Rectangle in a Hist ...