<!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. 17.Identity Server 4回顾

    openIdConnect做完之后,在登陆之后这个RequireConsent.用户同意授权这一步没有做直接跳过了,可以理解为我们自己比较信任的这种客户端 就是这个应用是属于我们自己的,都是我们自己配 ...

  2. css 属性相关

    css属性相关 宽和高 width属性可以为元素设置宽度, height属性可以为元素设置好高度 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性 文字字体 font-family 可以把 ...

  3. 用Go语言异常机制模拟TryCatch异常捕捉

    有的同学看到Go和TryCatch一起出现,心里可能会说,难道Go语言升级了,加入了try...catch语句.哈哈,其实Go语言从创建之初就没打算加入try...catch语句,因为创建Go的那帮大 ...

  4. Swift3.0 轮播图

    使用三个UIButton实现无限轮播:https://github.com/LXfeiYu/LXCarouselImages.git 喜欢的朋友给个星!!! 功能: 1.可以选择开启和关闭定时器 2. ...

  5. perl C/C++ 扩展（一）

    通过h2xs 中间件,我们可以快速的使用c或则C++ 库来实现perl 扩展功能 第一讲:跑通hello world 程序******************************我们使用命令:h2 ...

  6. AndroidTV开发

    AndroidTV的开发其实和Android的开发是一样的,现在的电视机可以安装AnroidApp

  7. Spring pom.xml配置

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  8. 测试 | Mock object

    实例: 一个简单的图书管理系统包括三个类: Book提供了书籍的定义 BookService提供了有关书籍借阅和归还的服务 BookMananger查找书籍并把对书籍状态的更改更新到数据库中 目前,B ...

  9. OSPF-1-OSPF的数据库交换（2）

    2.Hello过程: (1)在同一子网中发现其他运行OSPF的路由器 所有启用了OSPF的接口,都会监听发往224.0.0.5的组播Hello消息,这是表示所有OSPF路由器的组播地址.Hello包使 ...

  10. Python常用模块之hashlib(加密)

    Python常用模块之hashlib(加密) Python里面的hashlib模块提供了很多加密的算法,这里介绍一下hashlib的简单使用事例,用hashlib的md5算法加密数据import ha ...