<!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. iOS 一些struct类型的NSLog输出

    我们经常会输出一些坐标尺寸信息之类的,比如view的frame,是CGRect类型的,用frame.oringial.x 和frame.size.width来做NSLog参数好麻烦,还好苹果对这些常用 ...

  2. SpringBoot启动流程分析（四）：IoC容器的初始化过程

    SpringBoot系列文章简介 SpringBoot源码阅读辅助篇: Spring IoC容器与应用上下文的设计与实现 SpringBoot启动流程源码分析: SpringBoot启动流程分析(一) ...

  3. Github的基本功能：

    作者:Fadeoc Khaos链接:http://www.zhihu.com/question/20070065/answer/30521531来源:知乎著作权归作者所有,转载请联系作者获得授权. G ...

  4. 循序渐进学Python 1 安装与入门

    1 安装 2 使用 2.1 运行程序 3 艺搜参考 by 2013年10月16日 安装 Windows安装版,源码,帮助文档: 使用 打开开始菜单中的Python GUI启动Python解释器: 启动 ...

  5. 在命令行上启用 64 位 Visual C++ 工具集

    Visual C++ 包含可用于创建 apps 在 32 位上运行,64 位,或基于 ARM 的 windows 操作系统的编译器. 下面的列表描述了 cl.exe(Visual C++ 编译器)的各 ...

  6. spring AOP(切面) 表达式介绍

    在 spring AOP(切面) 例子基础上对表达式进行介绍 1.添加接口删除方法 2.接口实现类 UserDaoServer 添加实现接口删除方法 3.测试类调用delUser方法 4. 输出结果截 ...

  7. linux 安装mongo

    在Linux中安装Mongodb操作说明 MongoDB配置 版本说明:因本机所装Red Hat 为 64位操作系统故本例以64位的MongDB为例.所用版本如下: (1)    Red Hat En ...

  8. python 基础 8.1 r 正则对象

                                                                                                        ...

  9. VS中Component Class、User Control及Custom Control的区别 .

    .NET Framework 为您提供了开发和实现新控件的能力.除了常见的用户控件外,现在您会发现,您可以编写能执行自身绘图的自定义控件,甚至还可以通过继承扩展现有控件的功能.确定创建何种类型的控件可 ...

  10. Unix环境高级编程---信号

    参考博客:http://blog.csdn.net/alex_my/article/details/39494129 1. 信号概念 何为信号? 信号是一种软中断,可以由以下情形触发: -1: 用户按 ...