今天简单介绍一下用html,javascript来模拟双色球彩票选择器。
双色球彩票规则:由6个红球和1个蓝球组成,其中6个红球是从1~33中随机选出的不重复的6个数,从小到大一次排列;蓝球是1~16随机生成的一个数
1、创建红球数组,随机生成1~33的6个不重复的数字,并放入红球数组中,2、将数组中6个数字从小到大进行排列 3、将数组中的数字依次放入6个红球中,4、最后将随机生成的1~16中的一个数字放入最后的蓝球中。效果如图所示:
 
首先用css进行简单的样式设置

 

用javascript来模拟彩票生成

1、循环生成7个球放到div中,经过简单的样式设置就是我们看到的6个红球和一个蓝球;

2、从1~33中随机得到不重复的6个数字,从小到大排列后,放入红球中

创建函数得到随机红球

function getRandomRedBall() {
var array = [];  //创建数组用来存放随机生成的数字
var array1 = [];//创建对比数组用来判断生成的随机数是否重复
for (var i = 0; i < 6; i++) {
do { // 用do-while循环首先生成一个随机数
var number = Math.floor(Math.random() * 33 + 1); // 随机生成1~33的一个随机数
} while (array1[number] !== undefined);  // 用对比数组来判断生成的数字是否重复;
array1[number] = '';

(简单说一下原理:假如生成第一个数字5,由于array1[5] 没有定义,因此不会再执行do-while ,循环进行后面的操作,array1[5] = '';就已经定义了,并放入数组array[]中;完成for的第一次循环,

第二个数字如果还是5,则array1[5]已经定义符合do-while循环则返回再进行do-while循环,再生成一个数,直到不重复,用这种方法生成不重复的6个数)
if (number < 10) { //判断数字如果是个位数则前面添加0
number = '0' + number;
}
array[i] = number;//将生成的不重复的数字放入数组中
}
array.sort(function(a,b) {return a - b;}) //把生成的数组按小到大排列
var redBall = document.getElementsByTagName('p');
for (var i = 0; i < 6; i++) {
redBall[i].innerHTML = array[i];//将数组中的数字依次放入6个红球中
}
return redBall;

随机生成1~16的数字放入蓝球中

function getRandomBlueBall() {
var blueBall = document.getElementById('p' + 6);
var number = Math.floor(Math.random() * 16 + 1);
if (number < 10) {
number = '0' + number;
}
blueBall.innerHTML = number;
return blueBall;
}

将红球和蓝球组合在一起

function getRandomBall() {
getBall = getRandomRedBall() + getRandomBlueBall();
return getBall;
}

getRandomBall(); //得到双色球

添加鼠标点击事件
var checkBall = document.getElementById('checkBall');
var timer = setInterval('getRandomBall()',100);
isOn = true;
checkBall.onclick = function() {
isOn ? clearInterval(timer) : timer = setInterval('getRandomBall()',100);
isOn = !isOn;
}
</script>
</html>