onhashchange
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="随机" id="btn1">
<div id="div1"></div>
<script>
var oBtn = document.getElementById("btn1");
var oDiv = document.getElementById("div1");
var obj = {}; oBtn.onclick = function(){
var number = randomNum(35,7);
oDiv.innerHTML = number; var oRD = Math.random();
obj[oRD] = number; window.location.hash = oRD;
}; window.onhashchange = function(){
//undefined时为空
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 ++){
//Math.random() [0,1)
//Math.floor( Math.random() * arr.length 0~34
newArr.push( arr.splice(Math.floor( Math.random() * arr.length ),1) );//删除并返回被删除元素的数组
}
return newArr;//是一个二维数组
} </script>
</body>
</html>
onhashchange的更多相关文章
- html5 历史管理onhashchange和state
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery--index() window.onhashchange
index(): 1. 如果没有参数传给该函数,那么就返回一个整数,为其相对于其兄弟节点的位置. 2. 如果在一个元素集合上调用该函数,并且传入的参数为一个DOM元素或jQuery对象,那么返回一个整 ...
- onhashchange事件,只需要修改hash值即可响应onhashchange事件中的函数(适用于上一题下一题和跳转页面等功能)
使用实例: 使用onhashchange事件做一个简单的上一页下一页功能,并且当刷新页面时停留在当前页 html: <!DOCTYPE html><html><body& ...
- onhashchange事件--司徒正美
onhashchange事件是针对AJAX无缝刷新导致后退键失效而产生的事件,因此属于一个够新的事件,浏览器兼容性如下: Feature Chrome Firefox IE Opera Safari ...
- 捕获浏览器的前进、后退事件 window.onhashchange 并区别于点击链接
<html> <head> <meta http-equiv="content-type" content="text/html;chars ...
- 历史管理 onhashchange
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- History API与浏览器历史堆栈管理
移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持o ...
- 如何快速开发SPA应用
前言 web早已经进入了2.0时代了,如今的网页大有往系统应用级别的方向发展的趋势,再也不是以前的简单展示信息的界面了.如今很多webapp已经做到了原生应用的功能,并且运用自身的优势逐步取代之.HT ...
- 禁止页面后退JS(兼容各浏览器)
<script src="${ctxPath}/media/lib/jquery.history.js"></script> <script> ...
随机推荐
- C# MVC VS WebAPI
获取路径: MVC:Server.MapPath("/Templates/vshop/default.json") WebAPI:System.Web.Hosting.Hostin ...
- nginx for windows 配置多域名反向代理
调试了很久...哦耶 共享出来吧 其实 nginx反向代理同一ip多个域名,给header加上host就可以了 upstream test.test.cn { server 119. ...
- erlang的timer定时器浅析
timer作为其计时器: erlang的计时器timer是通过一个唯一的timer进程实现的,该进程是一个gen_server,用户通过timer:send_after和timer:apply_aft ...
- 01 redis特点及安装使用
一:redis的特点 ()redis是一个开源,BSD许可高级的key-value存储系统.可以用来存储字符串,哈希结构,链表,集合,因此,常用来提供数据结构服务. 二:redis和memcached ...
- JS 之 数据类型转换
首先我们来简单了解一下JS中的数据类型,JavaScript拥有字符串.数字.布尔.数组.对象.Null.Undefiend 6中数据类型.同一时候,JavaScript拥有动态类型. 也 ...
- python之异步IO
协程的用武之地 并发量较大的系统和容易在IO方面出现瓶颈(磁盘IO,网络IO),采用多线程.多进程可以解决这个问题,当然线程.进程的切换时很消耗资源的.最好的解决方案是使用单线程方式解决并发IO问题- ...
- 怎么利用jquery.form 提交form
说明:开发环境 vs2012 asp.net mvc c# 利用jQuery.form.js提交form 1.HTML前端代码 <%@ Page Language="C#" ...
- Java for LeetCode 102 Binary Tree Level Order Traversal
Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...
- Java for LeetCode 083 Remove Duplicates from Sorted List
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
- 基础 PHP 语法
PHP 脚本在服务器上执行,然后向浏览器发送回纯 HTML 结果. 基础 PHP 语法 PHP 脚本可放置于文档中的任何位置. PHP 脚本以 <?php 开头,以 ?> 结尾: < ...