<!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. mBot试用体验

    [Arduino话题] [mBot试用体验]1.mBot开箱体验(部分资料合集)http://bbs.elecfans.com/forum.php?mod=viewthread&tid=532 ...

  2. 使用python处理实验数据-yechen_pro_20171231

    整体思路 1.观察文档结构: - 工况之一 - 流量一28 - 测点位置=0 -测点纵断面深度-1 -该点数据Speedxxxxxxxx.txt -测点纵断面深度-2 -测点纵断面深度-3 -... ...

  3. 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间

    本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 <高性能流媒体服务器EasyDSS前端重构(一 ...

  4. 九度OJ 1153：括号匹配问题 （DP）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5193 解决:2248 题目描述: 在某个字符串(长度不超过100)中有左括号.右括号和大小写字母:规定(与常见的算数式子一样)任何一个左括 ...

  5. 九度OJ 1015：还是A+B （基础题）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6773 解决:4031 题目描述: 读入两个小于10000的正整数A和B,计算A+B.需要注意的是:如果A和B的末尾K(不超过8)位数字相同 ...

  6. 已知段地址，求CPU寻址范围

    已知段地址为0001H,仅通过变化偏移地址寻址,则CPU的寻址范围是? 物理地址 = 段地址×16 + 偏移地址 所以物理地址的范围是[16×1H+0H, 16×1H+FFFFH] 也就是[10H×1 ...

  7. 我的Java开发学习之旅------>System.nanoTime与System.currentTimeMillis的区别

    首先来看一道题:下面代码的输出结果是什么? import java.util.HashMap; import java.util.Map; public class HashMapTest { pub ...

  8. Java集合(一)：Java集合概述

    注:本文基于JDK 1.7 1 概述 Java提供了一个丰富的集合框架,这个集合框架包括了很多接口.虚拟类和实现类. 这些接口和类提供了丰富的功能.可以满足主要的聚合需求. 下图就是这个框架的总体结构 ...

  9. 【iOS开发-63】Unknown type name &quot;CGRect&quot;,did you mean &quot;Rect&quot;?的解决方式

    出现这个问题的童鞋,差点儿都是由于用了Xcode6. 原因:在Xcode6之前,创建的文件系统会自己主动为用户导入Foundation.h和UIKit.h文件,可是最新的Xcode6仅仅为用户导入了F ...

  10. git版本控制-- Windows+Git+TortoiseGit+COPSSH安装图文教程

    Windows+Git+TortoiseGit+COPSSH 安装图文教程 教程网址: http://www.liaoxuefeng.com/wiki/0013739516305929606dd183 ...