今天無意間看到了雙色球的開獎(jiǎng)叉信，發(fā)現(xiàn)一等獎(jiǎng)竟然中了10注。突然看到了發(fā)家致富的路子艘希。所以寫了一個(gè)雙色球的代碼硼身，提高一下中獎(jiǎng)率。完整的代碼在文章最后覆享。
css樣式佳遂，因?yàn)槲沂莿?dòng)態(tài)生成的標(biāo)簽，所以沒有寫很多css
<style>
* {
cursor: pointer;
}
span {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #000;
border-radius: 50%;
margin: 5px;
}
</style>
<div id="red"></div>
<div id="blue"></div>
<button>開始</button>
<button>停止</button>
通過js獲取元素
var red = document.getElementById('red')
var blue = document.getElementById('blue')
var start = document.getElementsByTagName('button')[0];
var end = document.getElementsByTagName('button')[1];
生成元素撒顿，紅球?yàn)?3個(gè)丑罪，藍(lán)球16個(gè)
function generate(element, num) {
var str = '';
for (var j = 1; j <= num; j++) {
str += '<span>' + j + '</span>'
}
element.innerHTML = str;
}
generate(red, 33);
generate(blue, 16);
現(xiàn)在生成完元素以后，我們的界面是這樣的凤壁，是不是看到了大獎(jiǎng)在向你招手吩屹。
取隨機(jī)數(shù)
function ranDom(start, end) {
var _a = end - start + 1;
return Math.floor(Math.random() * _a + start)
}
現(xiàn)在隨機(jī)數(shù)取好了，下一步需要去生成一個(gè)數(shù)組拧抖，并且需要給數(shù)組進(jìn)行去重以及確定數(shù)組內(nèi)元素的個(gè)數(shù)煤搜。因?yàn)樵谶@里我們需要調(diào)用上面取隨機(jī)數(shù)的函數(shù)，所以這里也需要傳上start和end
function arrAy(num, start, end) {
var _b = [];
while (_b.length < num) {
var _c = ranDom(start, end)
if (_b.indexOf(_c) === -1) {
_b.push(_c);
}
}
return _b;
}
現(xiàn)在我們可以得到一個(gè)有隨機(jī)數(shù)的數(shù)組唧席，下一步就對(duì)頁面上的元素進(jìn)行渲染擦盾。
function backGround(arr, color, element) {
for (var i = 0; i < element.length; i++) {
//先對(duì)元素內(nèi)的所有元素進(jìn)行背景色清空嘲驾。
element[i].style.background = '';
}
for (var j = 0; j < arr.length; j++) {
//這里對(duì)對(duì)應(yīng)的元素進(jìn)行背景色改變。因?yàn)橄聵?biāo)和元素差1個(gè)迹卢，所以這里減1辽故。
element[arr[j] - 1].style.background = color;
}
}
進(jìn)行下一步，調(diào)用這些函數(shù)腐碱，因?yàn)橄旅嫘枰〞r(shí)器來讓它自動(dòng)選擇榕暇，所以這里我把需要調(diào)用的函數(shù)寫到了這一個(gè)函數(shù)內(nèi)。
function select() {
var _d = arrAy(6, 1, 32)
var _e = arrAy(1, 1, 16)
backGround(_d, 'red', red.children);
backGround(_e, 'blue', blue.children);
console.log(_d,_e)
}
做完這一步喻杈，所有的靜態(tài)效果就完成了彤枢，看一下效果。
現(xiàn)在就需要一個(gè)定時(shí)器來讓它進(jìn)行自動(dòng)選擇筒饰，這個(gè)定時(shí)器我加到了按鈕的點(diǎn)擊事件上
var time = null
start.onclick = function () {
//如果不加判斷缴啡，多次點(diǎn)擊會(huì)造成定時(shí)器疊加，這樣不是我們想要的效果
if (time == null) {
time = setInterval(function () {
select()
}, 60)
}
}
end.onclick = function () {
clearInterval(time)
time = null
}
來看一看完整的效果瓷们。
OK业栅，寫到這里所有的步驟都已經(jīng)完成了，最后祝大家都可以中他個(gè)500萬
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
cursor: pointer;
}
span {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #000;
border-radius: 50%;
margin: 5px;
}
</style>
</head>
<body>
<div id="red"></div>
<div id="blue"></div>
<button>開始</button>
<button>停止</button>
<script>
var red = document.getElementById('red')
var blue = document.getElementById('blue')
var start = document.getElementsByTagName('button')[0];
var end = document.getElementsByTagName('button')[1];
function generate(element, num) {
var str = '';
for (var j = 1; j <= num; j++) {
str += '<span>' + j + '</span>'
}
element.innerHTML = str;
}
generate(red, 33);
generate(blue, 16);
function ranDom(start, end) {
var _a = end - start + 1;
return Math.floor(Math.random() * _a + start)
}
function arrAy(num, start, end) {
var _b = [];
while (_b.length < num) {
var _c = ranDom(start, end)
if (_b.indexOf(_c) === -1) {
_b.push(_c);
}
}
return _b;
}
function backGround(arr, color, element) {
for (var i = 0; i < element.length; i++) {
element[i].style.background = '';
}
for (var j = 0; j < arr.length; j++) {
element[arr[j]-1].style.background = color;
}
}
function select() {
var _d = arrAy(6, 1, 33)
var _e = arrAy(1, 1, 16)
backGround(_d, 'red', red.children);
backGround(_e, 'blue', blue.children);
}
var time = null
start.onclick = function () {
if (time == null) {
time = setInterval(function () {
select()
}, 60)
}
}
end.onclick = function () {
clearInterval(time)
time = null
}
</script>
</body>
</html>
學(xué)識(shí)有限谬晕，如有錯(cuò)誤或者不足碘裕，歡迎指出。
