html5 历史管理

1、onhashchange:改变hash值来进行历史管理。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="button" value="随机选择"  id="btn" />
 9         <div id="div1"></div>
10     </body>
11 </html>
12 <script>
13     window.onload = function(){
14         var oBtn = document.getElementById("btn");
15         var oDiv = document.getElementById("div1");
16         window.json = {};
17         oBtn.onclick = function(){
18             var key = Math.random();
19             var value = randomNum(35,7);
20             json[key] = value;
21             //oDiv.innerHTML = value;
22             window.location.hash = key;
23         }
24
25         window.onhashchange = function(){
26             var hashValue = window.location.hash.substring(1);
27             if(!hashValue)return;
28             oDiv.innerHTML = json[hashValue];
29         }
30     }
31
32     function randomNum(totlaNum,resultNum){
33         var totalArray = new Array();
34         var resultArray = new Array();
35         for(var i = 0 ;i < totlaNum;i++){
36             totalArray.push(i);
37         }
38
39         for(var i = 1; i<= resultNum;i++){
40             resultArray.push(totalArray.splice(Math.floor(Math.random()*totalArray.length),1));
41         }
42         return resultArray;
43     }
44 </script>

2、history+pushState+ popstate事件:需要在服务器下运行。网址是虚假的,需要服务器指定对应页面,否则刷新找不到页面。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="button" value="随机选择"  id="btn" />
 9         <div id="div1"></div>
10     </body>
11 </html>
12 <script type="text/javascript">
13     window.onload = function(){
14         var oBtn = document.getElementById("btn");
15         var oDiv = document.getElementById("div1");
16         window.json = {};
17         oBtn.onclick = function(){
18             var value = randomNum(35,7);
19             //pushState接收三个参数 :数据  标题(都没实现)  地址(可选)
20             window.history.pushState(value,"");
21             oDiv.innerHTML = value;
22         }
23
24         window.onpopstate = function(ev){
25             oDiv.innerHTML = ev.state;
26         }
27
28     }
29
30     function randomNum(totlaNum,resultNum){
31         var totalArray = new Array();
32         var resultArray = new Array();
33         for(var i = 0 ;i < totlaNum;i++){
34             totalArray.push(i);
35         }
36
37         for(var i = 1; i<= resultNum;i++){
38             resultArray.push(totalArray.splice(Math.floor(Math.random()*totalArray.length),1));
39         }
40         return resultArray;
41     }
42 </script>
时间: 06-03

html5 历史管理的相关文章

HTML5历史管理

边看视频边做的练习,随机选彩票demo 分别使用history和hash来实现 <!doctype html> <html> <head> <meta charset="utf-8" > <title>随机选彩票</title> <style type="text/css"> *{ padding: 0; margin: 0; } #btn1,#div1{ margin: 10px;

HTML5实战与剖析之历史管理(history对象)

HTML5新添加了对历史的管理,更新了history对象让管理历史状态更加方便了.在现代Web应用中,用户可以通过"前进"和"后退"按钮进行历史页面的切换.这让一些不在新页面中打开的新页面前进后退自如,提高了用户体验. 通过haschange事件,可以知道URL的参数什么时候发生了变化,也就是什么时候该有所反应.通过状态管理的API,能够在不加载新页面的情况下改变浏览器的URL.所以需要使用history.pushState()方法.history.pushStat

HTML5自学笔记[ 8 ]历史管理

触发历史管理的三种方法: 跳转页面 改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <title>随机产生彩票号码</title> 5 <meta charset="utf-8"/> 6 <script> 7 window.onload = func

历史管理

历史管理 •onhashchange  :改变hash值来管理 window.location.hash=''; window.onhashchange=function(){} •history  : –服务器下运行 –pushState :  三个参数 :数据  标题(都没实现)  地址(可选) –popstate事件 :  读取数据   event.state –注意:网址是虚假的,需在服务器指定对应页面,不然刷新找不到页面

HTML5新功能之八 《web works多线程》

一.什么是历史管理 HTML5新功能之七 <历史管理> HTML5新功能之八 <web works多线程>,布布扣,bubuko.com

HTML5 学习笔记(一)——HTML5概要与新增标签

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5 学习总结(一)——HTML5概要与新增标签

目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2.缺点 1.6.HTML5效果展示 1.7.HTML5学习与开发工具 1.7.1.基础要求 1.7.2.开发工具 1.8.HTML5语法规则与文档声明 1.8.1.语法规则 1.8.2.文档声明 1.8.2.文档声明 二.废弃的标签 三.新增的标签 3.1.新增的结构标签 3.2.新增加其它元素 3

HTML5 学习笔记--------》HTML5概要与新增标签!

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5新增功能

1.摆脱对平台的依赖HTML5可以摆脱对平台的依赖,用户打开浏览器,直接就可以访问应用,而不需要经过各种Store的审核.2.实时更新实时更新,通常平台的审核都需要七个工作日左右的时间,如果发布之后发现问题怎么办?Web方式就不存在这种问题.3.离线使用用户可以离线使用,更新下载量及少,可以全部更新,也可以选择替换部分文件.4.代码更安全安全使用HTML5,代码更安全安全.众所周知Web应用有一个很大的问题就是代码安全的问题,但现在HTML5可以将Web代码全部加密,本地应用解密后再运行,大大的