onhashchange

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <input type="button" value="随机" id="btn1">
 9     <div id="div1"></div>
10     <script>
11     var oBtn = document.getElementById("btn1");
12     var oDiv = document.getElementById("div1");
13     var obj = {};
14
15     oBtn.onclick = function(){
16         var number = randomNum(35,7);
17         oDiv.innerHTML = number;
18
19         var oRD = Math.random();
20         obj[oRD] = number;
21
22         window.location.hash = oRD;
23     };
24
25     window.onhashchange = function(){
26         //undefined时为空
27         var number = obj[ window.location.hash.substring(1) ] || "";//去掉#
28         oDiv.innerHTML = number;
29     };
30     function randomNum(alls,now){
31         var arr = [];
32         var newArr = [];
33
34         for(var i = 1;i <= alls;i ++){
35             arr.push(i);
36         }
37
38         for(var i = 0;i < now;i ++){
39             //Math.random()   [0,1)
40             //Math.floor( Math.random() * arr.length   0~34
41             newArr.push( arr.splice(Math.floor( Math.random() * arr.length ),1) );//删除并返回被删除元素的数组
42         }
43         return newArr;//是一个二维数组
44     }
45
46     </script>
47 </body>
48 </html>
时间: 2024-08-10 19:15:54

onhashchange的相关文章

捕获浏览器的前进、后退事件 window.onhashchange 并区别于点击链接

<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>onhashchange测试</title></head> <body> <a href="#p2">p2</a> <script> document.o

历史管理-onhashchange&amp;window.history

网页记录历史记录两种方法 1.onhashchange事件  改变hash值来管理 hash值:http://test.con#hash #后面内容即为hash值 设置网页的hash值  window.location.hash = "要设置的hash值" 获取hash值:var hash = window.location.hash.substring(1);//去掉#号 直接修改网址的hash值,不刷新页面,是不会显示hash指定的模块,此时需要用到onhashchange事件 修

onhashchange事件--司徒正美

onhashchange事件是针对AJAX无缝刷新导致后退键失效而产生的事件,因此属于一个够新的事件,浏览器兼容性如下: Feature Chrome Firefox IE Opera Safari support 5.0 3.6 (1.9.2) 8.0 10.6 5.0 由于chrome引发的版本号竞赛,现在chrome20+,firefox16+,opera12了,因此对于标准浏览器我们不必顾虑支持问题,精力集中在IE678上.IE8在兼容模式下虽然有此事件,但不生效.这个检测也很简单.至于

html5的onhashchange和history历史管理

html5的onhashchange和history历史管理 现在的开发,越来越倾向于页面内跳转,这种情况下需要更新自己的知识,来实现页面内跳转.history就是解决这个问题的. HTML5有两种解决办法: 1,onhashchange 用到了window.loaction.hash对象(存,取) 2,history (1) pushstate 三个参数:数据,标题(为空),url(可选). (2) popstate是一个事件,读取event.state数据 注意:url是虚假的.用户不能实际

jQuery--index() window.onhashchange

index(): 1. 如果没有参数传给该函数,那么就返回一个整数,为其相对于其兄弟节点的位置. 2. 如果在一个元素集合上调用该函数,并且传入的参数为一个DOM元素或jQuery对象,那么返回一个整数,为传入的元素相对于原集合的位置. 3. 如果传入一个字符串的参数作为selector给该函数,那么一个整数,为其在所有匹配传入的selector的元素中的位置. 注:1和3中的其代指调用该方法的元素. window.onhashchange: window.location.hash 设置或获取

历史管理 onhashchange

<!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-

Web安全--XSS现代WAF规则探测及绕过技术

XSS现代WAF规则探测及绕过技术初始测试 1.使用无害的payload,类似<b>,<i>,<u>观察响应,判断应用程序是否被HTML编码,是否标签被过滤,是否过滤<>等等: 2.如果过滤闭合标签,尝试无闭合标签的payload(<b,<i,<marquee)观察响应: 3.尝试以下的payload 1 <script>alert(1);</script> 2 <script>prompt(1);<

jQuery 单页无刷新插件

现在很多网站都使用了单页无刷新效果,这里自己也封装了一个类似 PJAX 的jquery插件(支持浏览器前进后退按钮及url地址更改不跳转),方便以后在项目中应用或参考,在测试的时候注意自己的本地路径,这里采用了ajax所以不能直接点击打开,必须得在本地服务器下执行: 文件目录: index.html 为首页展示页: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

如何获取url#号后的参数

昨天遇到这个问题:在A页面中通过location.href跳转到另一个B页面,此跳转地址是http://www.xyz.com/aa.html#bb.html?param=xxx 现在要怎么在B页面中取到param的值?现在的情况是跳到B页面后地址栏显示的就是http://www.xyz.com/aa.html#bb.html 后面的参数部分没有了,取到的参数值也是空的 搞了好久也没出来,最后问了大牛才发现我的基本功不行啊 理解就出错了,#后的内容都不会传到服务端的,所以到新页面看到的地址栏中就