淺談模擬彩票代碼，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>