<!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. Makefile调用shell应该注意的地方

    转载:http://blog.csdn.net/ninlei0115/article/details/9732191 1.在Makefile中只能在target中调用Shell脚本,其他地方是不能输出 ...

  2. selenium3 踩坑--move_to_element()报错

    问题:selenium3 使用move_to_element()报错,报错信息如下图所示: 网上没有找到合适的解决办法,回退到稳定的selenium2可以解决. pip install seleniu ...

  3. Jenkins--Run shell command in jenkins as root user?

    You need to modify the permission for jenkins user so that you can run the shell commands. You can i ...

  4. js document.queryCommandState() 各个参数

    命令标识符 2D-Position 允许通过拖曳移动绝对定位的对象. AbsolutePosition 设定元素的 position 属性为“absolute”(绝对). BackColor 设置或获 ...

  5. EasyPlayerPro windows播放器本地音频播放音量控制实现

    背景描述 作为一个播放器, 除了能播放视频和声音外,音量控制是绝对不能缺少的功能; 本文在音视频播放的基础上,增加对音量的控制: 实现流程 调用mixerGetDevCaps获取音频输出设备列表; 打 ...

  6. 在WePY中实现了小程序的组件化开发，组件的所有业务与功能在组件本身实现，组件与组件之间彼此隔离，上述例子在WePY的组件化开发过程中，A组件只会影响到A所绑定的myclick

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=%e5%be%ae%e4%bf%a1%e5%b0%8f%e7 ...

  7. Android笔记之Retrofit与RxJava的组合

    依赖 implementation 'com.squareup.retrofit2:retrofit:2.5.0' implementation 'com.squareup.retrofit2:con ...

  8. div+css清除浮动代码

    <style type="text/css"> .div1{ background:#000080; border:1px solid red;} .div2{ bac ...

  9. 您使用的是不受支持的命令行标记 chrome

    检查 chrome://flags/#extensions-on-chrome-urls 是否开启 开启了的话就关掉检查 启动chrome的快捷方式是否在目标后有额外的参数 有就删了 在浏览器中输入c ...

  10. LeetCode：二叉树剪枝【814】

    LeetCode:二叉树剪枝[814] 题目描述 给定二叉树根结点 root ,此外树的每个结点的值要么是 0,要么是 1. 返回移除了所有不包含 1 的子树的原二叉树. ( 节点 X 的子树为 X ...