HTML5历史管理
边看视频边做的练习，随机显示数字，分别使用history和hash来实现历史管理
<!doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>随机显示数字</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#btn1,#div1{
margin: 10px;
}
</style>
</head>
<body>
<input type="button" value="请随机选择" id="btn1" />
<div id="div1"></div>
<script type="text/javascript">
// history，需在服务器下运行
window.onload = function(){
var oBtn1 = document.getElementById('btn1');
var oDiv1 = document.getElementById('div1');
oBtn1.onclick = function(){
var arr = randomNum(35,7);
history.pushState(arr,'',arr); // 三个参数，数据、标题（没有效果）、地址（可选）
oDiv.innnerHTML = arr;
}
window.onpopstate = function(ev){
oDiv.innnerHTML = ev.state; // popstate事件，读取数据 event.state
}
function randomNum(iAll,iNow){
var arr = [];
var newArr = [];
for(var i=1;i<=iAll;i++){
arr.push(i);
}
for(var i=0; i<iNow; i++){
newArr.push( arr.splice(Math.floor(Math.random()*arr.length),1));
}
return newArr;
}
}
//onhashchange通过改变hash值来管理
window.onload = function(){
var oBtn1 = document.getElementById('btn1');
var oDiv1 = document.getElementById('div1');
//var json = {};
oBtn1.onclick = function(){
var arr = randomNum(35,7);
var num = Math.random();
json[num] = arr;
oDiv1.innerHTML = arr;
window.location.hash = num;
}
window.onhashchange = function(){
oDiv1.innerHTML = json[window.location.hash.substring(1)];
}
function randomNum(iAll,iNow){
var arr = [];
var newArr = [];
for(var i=1;i<=iAll;i++){
arr.push(i);
}
for(var i=0; i<iNow; i++){
newArr.push( arr.splice(Math.floor(Math.random()*arr.length),1));
}
return newArr;
}
}
</script>
</body>
</html>
HTML5历史管理的更多相关文章
- html5 历史管理
1.onhashchange:改变hash值来进行历史管理. <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- HTML5历史管理状态机制
前言:想要不刷新页面同时改变url 可以用HTML5 window对象的 hashChange 事件.同时介绍两个相关的api 和 1个事件. 两个API:1.history.pushState({n ...
- html5 历史管理onhashchange和state
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5(历史管理）
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- HTML5自学笔记[ 8 ]历史管理
触发历史管理的三种方法: 跳转页面 改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: <!doctype html> <html lang=&q ...
- Clipboard Action for Mac（智能剪贴板历史管理器）破解版安装
1.软件简介 Clipboard Action 是 macOS 系统上一款智能剪贴板历史管理器,它允许剪贴板历史中的每一段内容执行操作.使用 AppleScript 或 Automator 工作 ...
- html5 - history 历史管理
参考文章: w3c : http://www.w3.org/html/ig/zh/wiki/HTML5/history 张鑫旭 : http://www.zhangxinxu.com/wo ...
- 关于HTML5中hash部分API在历史管理，选项卡自动跳转中的一点使用
在群里最近有人提到如何处理在页面跳转之后,想要直接定位到相对应的选项卡的选项上,比如首页有登录和注册两个按钮,而登录注册页面有一对选项卡分别对应的是登陆和注册,想要实现的功能是点击登陆去到登录页的登录 ...
- pjax 历史管理 jQuery.History.js
更新 http://www.bootcdn.cn/jquery.pjax/ 简介 pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接.网页标题.以及 ...
随机推荐
- ubuntu 学习笔记2--安装tomcat
参考维基百科http://wiki.ubuntu.org.cn/Tomcat 安装Tomcat sudo apt-get install tomcat6 设置Tomcat运行的JAVA环境 如果已经设 ...
- 风萧萧兮易水寒 coding一去兮不复还
这一年都在忙碌中渡过.没有看过日落没有享受过日常.希望可以在忙碌中有些收获.工作马上要三年了. 风萧萧兮易水寒 coding一去兮不复还 记的刚毕业的时候喜欢自己晚上更新下博客.那时候也很忙.但是后来 ...
- 10169 - Urn-ball Probabilities !
描述:有两个罐子,一个罐子里有一个红球,另一个罐子里有一个红球和一个白球,每次从两个罐子里各取一个球,然后在向每个罐子里各加一个白球,一次取到两个红球时就结束取球,求n次取球中至少一次为取球为红球的概 ...
- 关于ActiveMQ的一点总结
ActiveMQ入门 作者:一路向北 摘要:本文主要讲述ActiveMQ的基本知识和使用方法,并简单结合spring使用ActiveMQ. 一.ActiveMQ特性和使用总览 企业消息软件从80年代起 ...
- Windows核心编程学习九：利用内核对象进行线程同步
注:源码为学习<Windows核心编程>的一些尝试,非原创.若能有助于一二访客,幸甚. 1.程序框架 #include "Queue.h" #include <t ...
- 配置Ubuntu Server高速apt-get源
方法: 1.修改源地址:cp /etc/apt/sources.list /etc/apt/sources.list.backvim /etc/apt/sources.list 加入如下内容(中科大的 ...
- 项目开发之分页---异步分页（ajax）
PS:前面忘了给大家讲解后台需要做的 ,同步分页的时候,我们只需要定义一个方法,给前台传递一个page对象,前台接收到直接展示即可:异步分页要多一步,首先还是写一个方法,传递初始对象,后面的ajax返 ...
- [pinyin4j] java版汉字转换拼音（大小写）
pinyin4J 是一个可以将汉字转换成拼音的lib,非常实用,其maven地址为:http://mvnrepository.com/artifact/com.belerweb/pinyin4j/2. ...
- nio简介
上一篇 Java I/O演进与Linux网络I/O模型 一.传统BIO java传统bio编程概念: http://www.cnblogs.com/carl10086/p/6034563.html# ...
- ManualResetEvent和AutoResetEvent的区别
在讨论这个问题之前,我们先了解这样一种观点,线程之间的通信是通过发信号来进行沟通的.(这不是废话) 先来讨论ManualResetEvent,讨论过程中我会穿插一些AutoResetEvent的内容, ...