<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

//onhashchange : 事件：当hash值有变化的时候，就会触发

window.onload = function(){

    var oInput = document.getElementById('input1');

    var oDiv = document.getElementById('div1');

    var obj = {};

    oInput.onclick = function(){

        var number = randomNum(35,7);

        oDiv.innerHTML = number;

        var oRD = Math.random();

        obj[oRD] = number;

        window.location.hash = oRD;

    };

    window.onhashchange = function(){

        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++){

            newArr.push( arr.splice(Math.floor(Math.random()*arr.length),1) );

        }

        return newArr;

    }

};

</script>

</head>

<body>

<input type="button" value="35选7" id="input1" />

<div id="div1"></div>

</body>

</html>

历史管理 onhashchange的更多相关文章

  1. html5 历史管理onhashchange和state

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HTML5自学笔记[ 8 ]历史管理

    触发历史管理的三种方法: 跳转页面 改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: <!doctype html> <html lang=&q ...

  3. HTML5历史管理

    边看视频边做的练习,随机显示数字,分别使用history和hash来实现历史管理 <!doctype html> <html> <head> <meta ch ...

  4. html5 历史管理

    1.onhashchange:改变hash值来进行历史管理. <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  5. Clipboard Action for Mac（智能剪贴板历史管理器）破解版安装

    1.软件简介    Clipboard Action 是 macOS 系统上一款智能剪贴板历史管理器,它允许剪贴板历史中的每一段内容执行操作.使用 AppleScript 或 Automator 工作 ...

  6. pjax 历史管理 jQuery.History.js

    更新 http://www.bootcdn.cn/jquery.pjax/ 简介 pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接.网页标题.以及 ...

  7. html5 - history 历史管理

    参考文章: w3c     :  http://www.w3.org/html/ig/zh/wiki/HTML5/history 张鑫旭  : http://www.zhangxinxu.com/wo ...

  8. html5(历史管理）

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  9. HTML5历史管理状态机制

    前言:想要不刷新页面同时改变url 可以用HTML5 window对象的 hashChange 事件.同时介绍两个相关的api 和 1个事件. 两个API:1.history.pushState({n ...

随机推荐

  1. 微信小程序开发之修改和获取变量的值

    在小程序开发过程中有两种变量,一种是定义在app,js里面的globalData定义的全局变量,另一种是在各个页面app,data里面的定义的变量. 一:全局变量的定义,获取值,赋值,修改 app.j ...

  2. opensns入门

    1.公共控制器 AdminController.class.php 2.控制器中 使用 $list = $this->lists();  可以获取数据表中的数据,相当于基本的查询 3.将数据查询 ...

  3. [Xcode 实际操作]三、视图控制器-(1)使用UIScrollView展示多个视图可控制器

    目录:[Swift]Xcode实际操作 本文将演示使用滚动视图创建多个页面. [Create a new Xcode project]->[Single View App]->[Next] ...

  4. 上传到git

    https://blog.csdn.net/Lucky_LXG/article/details/77849212

  5. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

  6. python使用rabbitmq实现简单的消息转发

    准备: 1.下载elang语言的支持环境http://www.erlang.org/download.html (rabbitmq使用它开发的) 2.下载rabbitmq软件http://www.ra ...

  7. python 基础(四) 函数

    函数 一.什么是函数? 函数是可以实现一些特定功能的 小方法 或者是小程序 优点: 提高 了代码的后期维护 增加了代码的重复使用率 减少了代码量 提高了代码可读性 二.函数的定义 使用 def关键+函 ...

  8. __getitem__,__setitem__,__delitem__

    __getitem__.__setitem__.__delitem__ 总结: __getitem__,__setitem_,__delitem__ : obj[‘属性’]的方式去操作属性时触发的方法 ...

  9. ARP数据包

    结构ether_header定义了以太网帧首部:结构arphdr定义了其后的5个字段,其信息用于在任何类型的介质上传送ARP请求和回答:ether_arp结构除了包含arphdr结构外,还包含源主机和 ...

  10. CATIA 各个版本代号详解

    一． 第几代(V-"version")简介 1982—1988年,catia相继发布了第一代—V1版本.第二代—V2版本.第三代—V3版本,并于1993年发布了功能强大的第四代—V ...