<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
window.onload=function(){
var oin=document.getElementById('input1');
var odiv=document.getElementById('div1');
var json={};
oin.onclick=function(){
/* Random access num value */
var num=Math.random();
/* Get random 7 digit */
var arr=randomNum(35,7);
/* Random index storage arr Random 7 digit */
json[num] =arr;
odiv.innerHTML=arr;
window.location.hash=num;
}
window.onhashchange=function(){
odiv.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>
<input type="button" value=" Random selection " id="input1">
<div id="div1"></div>
</body>
</html>

Index value of random array

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
window.onload=function(){
var oin=document.getElementById('input1');
var odiv=document.getElementById('div1');
oin.onclick=function(){
var arr=randomNum(35,7);
/* Array to store */
history.pushState(arr,'');
odiv.innerHTML=arr;
};
/* Take the function of the array */
window.onpopstate=function(ev)
{
odiv.innerHTML=ev.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;
}
}
</script>
<body>
<input type="button" value=" Random selection " id="input1">
<div id="div1"></div>
</body>
</html>

This method is only suitable for use on the server

html5 History management onhashchange and state More articles about

  1. HTML5 History management

    Practice while watching the video , Random numbers , Separate use history and hash To achieve history management <!doctype html> <html> <head> <meta ch ...

  2. html5 History management

    1.onhashchange: change hash Value for history management . <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  3. HTML5 History management state mechanism

    Preface : Want to change without refreshing the page at the same time url It can be used HTML5 window Object's hashChange event . At the same time, two related problems are introduced api and 1 Events . Two API:1.history.pushState({n ...

  4. html5( History management )

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  5. History management onhashchange

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. HTML5 Self study notes [ 8 ] History management

    Three ways to trigger history management : Jump to the page change hash value pushState( Running in a server environment ) use hash Value to trigger history management : <!doctype html> <html lang=&q ...

  7. Clipboard Action for Mac( Smart clipboard history manager ) Cracked version installation

    1. Software introduction Clipboard Action yes macOS System on a smart clipboard history manager , It allows operations to be performed on every piece of the history of the clipboard . Use AppleScript or Automator Work ...

  8. html5 - history History management

    Reference article : w3c     :  http://www.w3.org/html/ig/zh/wiki/HTML5/history Zhang Xin Xu  : http://www.zhangxinxu.com/wo ...

  9. About HTML5 in hash part API In history management , Tab auto jump in the use of a point

    Recently, someone in the group mentioned how to deal with after page Jump , Want to navigate directly to the options of the corresponding tab , For example, the home page has two buttons: login and register , The login registration page has a pair of tabs corresponding to login and registration respectively , The function you want to achieve is to click login to login on the login page ...

Random recommendation

  1. bzoj 3506 &amp;&amp; bzoj 1552 splay

    Check the minimum value , Delete , Flip ... obviously splay ah ... #include<iostream> #include<cstdio> #include<algorithm> ...

  2. Ruby character string

    stay Ruby Medium String Object holds and manipulates one or more bytes of any sequence , The character representation of human language . Simple string text enclosed in single quotes , Such as 'This is a simple Ruby string liter ...

  3. tomcat+javaWeb+spring An urban supply and demand management system of

    This is learning for yourself javaweb My first little project , I learned it from the video , Is from java1234 It's written by Xiao Feng , There are many over there java Video can be used as a learning reference , The video uses tomcat As the back-end , also ( •̀ ω ...

  4. Some little-known but very practical data structures - Haippy

    original text :http://www.udpwork.com/item/9932.html As a program ape ( Yuan ), You have to be familiar with some common data structures , Such as stack . queue . character string . Linked list . Binary tree . Hash , But in addition to these common data structures ...

  5. IO Design patterns :Reactor and Proactor contrast

    IO Design patterns :Reactor and Proactor contrast The open source products we usually contact are Redis.ACE, Event models all use Reactor Pattern : And the same thing about event handling Proactor, Because of the operating system , Related open source products also ...

  6. windows Upload files to linux

    1. stay putty Download from our website putty Follow pscp 2. install ssh Follow putty sudo apt-get install openssh-server sudo apt-get install putt ...

  7. Flex coordinate

    flash and flex For different purposes , Provides 3 Two different coordinate systems . The whole point is (stage Grade ) Local coordinate system ( Component level ) Content coordinate system ( Relative to the local coordinate system ) The points in these coordinate systems can be transformed , And there are corresponding methods ...

  8. Sideslip RESideMenu Use

    MainTabBarViewController *mainCtrl = [[MainTabBarViewController alloc] init]; LeftViewController *le ...

  9. Chapter two Struts 2 Application

    2.1 Struts 2 Application     2.1.1 Use steps         1. establish web project , add to jar package , establish helloWorld.jsp page         2. establish HelloWorldAction ...

  10. JS Common ways to manipulate strings

    JS operation String Object method charAt(index): Returns the string at the specified index charCodeAt(index): Returns the... Of the character at the specified index Unicode Value concat(str1,str2,...) ...