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技术提供快速的浏览体验与真正的永久链接.网页标题.以及 ...
随机推荐
- ASP.NET Web安装程序
键发布ASP.NET Web安装程序,搞WebForm的童鞋看过来... 前言:最近公司有个Web要发布,但是以前都是由实施到甲方去发布,配置,这几天有点闲,同事让我搞一个一键发布,就和安装软件那样的 ...
- Python Redis 数据复制.
1 > 下载Python操作Redis的客户端 https://pypi.python.org/pypi/redis/2.7.6 下载完成后,参考该网站相关命令,执行安装. 2 > 下载 ...
- join多表连接和group by分组
join多表连接和group by分组 上一篇里面我们实现了单表查询和top N查询,这一篇我们来讲述如何实现多表连接和group by分组. 一.多表连接 多表连接的时间是数据库一个非常耗时的操作, ...
- JVM内存管理学习总结（一）
I.JVM进程的生命周期 JVM实例的生命周期和java程序的生命周期保持一致,即一个新的程序启动则产生一个新的JVM进程实例,程序结束则JVM进程实例伴随着消失.那么程序启动和程序终止就是JVM实例 ...
- oracle与sqlserver区别
sqlserver只能在windows平台上运行,与windows兼容性较高 oracle可能在windows和linux上运行 sqlserver的安全性不是很高 oracle安全性能获得了最高级别 ...
- classnull100 - The 3n + 1 problem
新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正 The 3n + 1 problem Background Problems in Computer Science are o ...
- 生成UUID简易版
最近一体化项目的主键ID都要求使用UUID,生成方法如下: import org.safehaus.uuid.UUIDGenerator; /** UUID生成器对象 */ private ...
- java.lang.ClassNotFoundException: [Ljava.lang.String解决办法
原来jdk5.0的时候不会报这个错,用了jdk6.0就出现了这个错误,因为没有重载java.lang.String这个类 解决方法: 在vm缺省参数里添加-Dsun.lang.ClassLoader. ...
- CHM木马
一. 弹出计算器 打开EasyCHM,工具 -> 反编译指定的CHM,选择目标文件和反编译工作目录. 进入反编译的工作目录,找到并编辑主页文件,这里是index.html 在<body&g ...
- git 查看某个文件的历史修改版本
[git status 查看修改的文件路径] git log --follow -p routes/admin/contract_operation.js