浅谈模拟彩票代码，html,javascript

今天简单介绍一下用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>