<!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. VueJS事件处理器v-on：事件修饰符&按键修饰符

    事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通 ...

  2. phpQuery—基于jQuery的PHP实现（转）

    Query的选择器之强大是有目共睹的,phpQuery 让php也拥有了这样的能力,它就相当于服务端的jQuery. 先来看看官方简介: phpQuery is a server-side, chai ...

  3. 上门洗车APP --- Androidclient开发 之 网络框架封装介绍（二）

    上门洗车APP --- Androidclient开发 之 网络框架封装介绍(二) 前几篇博文中给大家介绍了一下APP中的基本业务及开发本项目使用的网络架构: 上门洗车APP --- Androidc ...

  4. jdbc 链接池

    package cn.itcast.jdbc.datasourse; import java.sql.Connection;import java.sql.DriverManager;import j ...

  5. C#高级编程八十一天----捕获异常

    捕获异常 前面主要说了关于异常的一些基础和理论知识,没有进入到正真的异常案例,这一讲通过几个案例来描写叙述一下异常的捕获和处理. 案例代码: using System; using System.Co ...

  6. 流式 storm介绍

    Storm是什么 如果只用一句话来描述storm的话,可能会是这样:分布式实时计算系统.按照storm作者的说法,storm对于实时计算的意义类似于hadoop对于批处理的意义.我们都知道,根据goo ...

  7. redis问题接囧办法及经验

    转自:https://my.oschina.net/freegeek/blog/324410 1.redis持久化,来自官方说明 如何选择使用哪种持久化方式? 一般来说, 如果想达到足以媲美 Post ...

  8. 目标跟踪之粒子滤波---Opencv实现粒子滤波算法

    目标跟踪学习笔记_2(particle filter初探1) 目标跟踪学习笔记_3(particle filter初探2) 前面2篇博客已经提到当粒子数增加时会内存报错,后面又仔细查了下程序,是代码方 ...

  9. linux 设置静态IP方法

    本系统使用 linux redhat 7.2 1.   修改ip vi   /etc/sysconfig/network-scripts/ifcfg-eno16777736 2. 修改数据项如下 3. ...

  10. wamp环境配置；转自发瑞的博客(www.cnblogs.com/cyrfr/p/6483529.html)

    php手动搭建环境有好多种组合,版本号不一致,会导致搭建失败. 我搭建的组合是: php5.6+MySQL5.6+Apache2.4的组合. 一.PHP语言包下载 首先从官网上下载php5.6 htt ...