HTML历史管理-彩票生成器

一般的彩票网站都有机选(随机选择)功能:

网易彩票

好123彩票

下面就用javascript简单模拟一下

HTML

1
2
<div id="caipiao"></div>
<button id="J_btn">彩票生成</button>

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var btn = document.getElementById('J_btn'),
caipiao = document.getElementById('J_caipiao');
btn.addEventListener('click',function(){
var nums = randomNum(35,7);
caipiao.innerHTML = nums;
});
/**
* 从指定数组中随机抽取指定个数的数字
* @param {[Number]} alls [总个数]
* @param {[Number]} selected [要选择的个数]
* @return {[Array]} [返回的指定个数的数组]
*/
function randomNum(alls,selected){
var numArr = [],
resultArr = [],
index;
for(var i = 1; i <= alls; i++){
numArr.unshift(i);
}
for(var j = 0; j < selected; j++){
index = Math.floor( Math.random() * alls );
resultArr.push(numArr[index]);
}
return resultArr;
}

JS Bin

但是有时候我感觉前一组数字会更好,想返回,可是上面的没有此功能。

下面就来完成上面提到的需求:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var btn = document.getElementById('J_btn'),
caipiao = document.getElementById('J_caipiao');
btn.addEventListener('click',function(){
var numKey = Math.random();
var nums = randomNum(35,7);
caipiao.innerHTML = nums;
window.location.hash = nums;
});
/**
* 从指定数组中随机抽取指定个数的数字
* @param {[Number]} alls [总个数]
* @param {[Number]} selected [要选择的个数]
* @return {[Array]} [返回的指定个数的数组]
*/
function randomNum(alls,selected){
var numArr = [],
resultArr = [],
index;
for(var i = 1; i <= alls; i++){
numArr.unshift(i);
}
for(var j = 0; j < selected; j++){
index = Math.floor( Math.random() * alls );
resultArr.push(numArr[index]);
}
return resultArr;
}
window.onhashchange = function(){
var num = window.location.hash.substr(1) || '';
caipiao.innerHTML = num;
};

预览地址:demo1

打开上面的连接,看地址栏的变化,会有一串数字。当生成几组之后,你可以通过浏览器的后退按钮选择前面生成的数。

JS Bin

进一步优化:

此时URL中的数字就是生成的数字,所以让人感觉不专业,所以我们做下处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var btn = document.getElementById('J_btn'),
caipiao = document.getElementById('J_caipiao'),
obj = {};
btn.addEventListener('click',function(){
var nums = randomNum(35,7);
caipiao.innerHTML = nums;
var numKey = Math.random();
obj[numKey] = nums;
window.location.hash = numKey;
});
/**
* 从指定数组中随机抽取指定个数的数字
* @param {[Number]} alls [总个数]
* @param {[Number]} selected [要选择的个数]
* @return {[Array]} [返回的指定个数的数组]
*/
function randomNum(alls,selected){
var numArr = [],
resultArr = [],
index;
for(var i = 1; i <= alls; i++){
numArr.unshift(i);
}
for(var j = 0; j < selected; j++){
index = Math.floor( Math.random() * alls );
resultArr.push(numArr[index]);
}
return resultArr;
}
window.onhashchange = function(){
var num = obj[window.location.hash.substr(1)] || '';
caipiao.innerHTML = num;
};

解析:

新增了一个对象 obj,存储生成的数字,关键字是 随机生成的数字numKey,从hash取的时候也是根据numKey。

预览:demo2

此时你会看到浏览器后面有一串小数,貌似很专业。

分享到: