<!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. Makefile研究(三) —— 实际应用

    转自:http://blog.csdn.net/jundic/article/details/17886637 前面讲了Makefile 的简单语法和简单的应用模板,但在实际项目应用中比这个肯定复杂很 ...

  2. LeetCode: 463 Island Perimeter(easy)

    题目: You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 repr ...

  3. 徒手撸一个 Spring Boot 中的 Starter ，解密自动化配置黑魔法！

    我们使用 Spring Boot,基本上都是沉醉在它 Stater 的方便之中.Starter 为我们带来了众多的自动化配置,有了这些自动化配置,我们可以不费吹灰之力就能搭建一个生产级开发环境,有的小 ...

  4. Two sum（给定一个无重复数组和目标值，查找数组中和为目标值的两个数，并输出其下标）

    示例: nums = [1,2,5,7] target = [6] return [0,2] Python解决方案1: def twoSum(nums, target): ""&q ...

  5. 新版蜀山剑侠传3D立体格斗全方位剖析

    国人终极格斗<蜀山剑侠传>,突破传统横版格斗"二次元"瓶颈,率先开辟3D立体横版格斗网游先河,实现"有纬度"的空间化立体式全景3D战斗体验!游戏大量 ...

  6. 2017-7-22 NOIP模拟赛

    Digits (digits.cpp/c/pas) Description给一个关于 的多项式,并给定一个 ,求该多项式在带入该 时的值最后 位数字.Input第一行两个整数 . :之后的 行,每行两 ...

  7. 【OpenJ_Bailian - 1328】Radar Installation （贪心）

    Radar Installation 原文是English,直接上中文 Descriptions: 假定海岸线是无限长的直线.陆地位于海岸线的一侧,海洋位于另一侧.每个小岛是位于海洋中的一个点.对于任 ...

  8. XHTML学习笔记 Part3：核心属性

    1. 3个属性组: 核心属性:class.id 和title属性 国际化属性:dir.lang和xml:lang属性 UI事件:与如下事件关联的属性: onclick.ondoubleclick.on ...

  9. 【NOIP2015】 Day2 T2 字串 （多维动归）

    2018-09-12 原题传送门(洛谷)https://www.luogu.org/problemnew/show/P2679 模拟考试的时候完全没有想到 正确的DP方程呢 本来写了一个大致是对的转移 ...

  10. mysql之SQL入门与提升（一）

    一.基本的增删改查 1.1首先建一张表 DROP TABLE IF EXISTS `websites`;CREATE TABLE `websites` ( `id` int(11) NOT NULL ...