<!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. CCF 201604-2 俄罗斯方块 (模拟)

    问题描述 俄罗斯方块是俄罗斯人阿列克谢·帕基特诺夫发明的一款休闲游戏. 游戏在一个15行10列的方格图上进行,方格图上的每一个格子可能已经放置了方块,或者没有放置方块.每一轮,都会有一个新的由4个小方 ...

  2. Oracle 11g client 安装

    本文所有红色字体标注的为本人计算机安装方法(Oracle 11g安装在本地 Oracle 11g client 也是安装在本地 如果情况一致 可参照本人方法安装) Oracle 11g client ...

  3. 正向渲染路径细节 Forward Rendering Path Details

    http://www.ceeger.com/Components/RenderTech-ForwardRendering.html This page describes details of For ...

  4. [Xcode 实际操作]九、实用进阶-(5)使用正则表达式判断格式是否正确

    目录:[Swift]Xcode实际操作 本文将演示使用正则表达式判断邮箱的格式是否正确. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit ...

  5. Android近场通信---NFC基础（三）（转）

    转自 http://blog.csdn.net/think_soft/article/details/8180203 过滤NFC的Intent 要在你想要处理被扫描到的NFC标签时启动你的应用程序,可 ...

  6. 51Nod 1043 幸运号码

    #include <stdio.h> #include <algorithm> using namespace std; typedef long long ll; ; ][] ...

  7. PostgreSQL - N''和::bpchar

    N''的效果和::bpchar效果类似,都表示定长字符串.比如下边的sql: select n'233' as num; select '233'::bpchar as num; select '23 ...

  8. ShareSDK集成遇到问题

    解决方案

  9. [题解]（折半搜索/高斯消元枚举自由元）BZOJ_1770_Lights

    状压,时间空间都不行,如果每次搜索一半就可以省下很多空间,用map记下每种状态的答案,最后再把两次的答案合并 然而正解是高斯消元解异或方程组,最后搜索自由元 #include<iostream& ...

  10. [題解]luogu_P3205/BZOJ_1996 合唱隊

    前言:基本上發題解的都是抄的題解所以 來源:題解 题目描述 为了在即将到来的晚会上有更好的演出效果,作为AAA合唱队负责人的小A需要将合唱队的人根据他们的身高排出一个队形.假定合唱队一共N个人,第i个 ...