<!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. JavaScript 对象字面量

    JavaScript 对象字面量   JavaScript 对象字面量 在编程语言中,字面量是一种表示值的记法.例如,"Hello, World!" 在许多语言中都表示一个字符串字 ...

  2. Lua 5.1.1 源代码阅读笔记

    http://blog.csdn.net/hamenny/article/details/4506130

  3. [翻译] 正式宣布 .NET 5

    原文: Introducing .NET 5 今天,我们宣布 .NET Core 3.0 之后的下一个版本将是 .NET 5 .这将是 .NET 系列的下一个重要版本. 将来只会有一个 .NET ,您 ...

  4. Android教程

    转载,但请务必在明确位置注明出处! http://stormzhang.com/android/2014/07/07/learn-android-from-rookie/ Android Killer ...

  5. 各种移动GPU压缩纹理的使用方法

    本文系原创整理,欢迎转载,请标明链接 http://www.cnblogs.com/luming1979 有问题欢迎加qq群讨论:366239605 介绍了各种移动设备所使用的GPU,以及各个GPU所 ...

  6. 2013 Noip提高组 Day2

    3288积木大赛 正文 题目描述 春春幼儿园举办了一年一度的“积木大赛”.今年比赛的内容是搭建一座宽度为n的大厦,大厦可以看成由n块宽度为1的积木组成,第i块积木的最终高度需要是hi. 在搭建开始之前 ...

  7. JS实现购物车动态功能

    整理了一下当时学js写的一些案例,觉得购物车功能在一般网站比较常见且基础,现在把它整理出来,需要的小伙伴可以参考一下. 该案例购物车主要功能如下: 1. 商品单选.全选.反选功能 2. 商品添加.删除 ...

  8. 初次接触Service笔记

    Service是后台的运行的小程序,分两种一种是StarService()另外一种是bindService(),这种可调用Service中的方法和返回结果等操作而StarService不能 他的生命周 ...

  9. EasyUI datagrid 列宽度拖动问题

    问题:拖不动或者偶尔能拖动,拖动不按指定? 原因:列宽度绑定的时候使用的百分比; 方法:获取总宽度,经过百分比计算在绑定

  10. Codeforces 1137B（kmp next数组构造）

    为了物尽其用,Next求出最多有哪部分能重复使用,然后重复使用就行了-- const int maxn = 5e5 + 5; char s[maxn], t[maxn]; int cnts0, cnt ...