今天无意间看到了双色球的开奖，发现一等奖竟然中了10注。突然看到了发家致富的路子。所以写了一个双色球的代码，提高一下中奖率。完整的代码在文章最后。
css样式，因为我是动态生成的标签，所以没有写很多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];
生成元素，红球为33个，蓝球16个
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)
}
现在随机数取好了，下一步需要去生成一个数组，并且需要给数组进行去重以及确定数组内元素的个数。因为在这里我们需要调用上面取随机数的函数，所以这里也需要传上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;
}
现在我们可以得到一个有随机数的数组，下一步就对页面上的元素进行渲染。
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++) {
//这里对对应的元素进行背景色改变。因为下标和元素差1个，所以这里减1。
element[arr[j] - 1].style.background = color;
}
}
进行下一步，调用这些函数，因为下面需要定时器来让它自动选择，所以这里我把需要调用的函数写到了这一个函数内。
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)
}
做完这一步，所有的静态效果就完成了，看一下效果。
现在就需要一个定时器来让它进行自动选择，这个定时器我加到了按钮的点击事件上
var time = null
start.onclick = function () {
//如果不加判断，多次点击会造成定时器叠加，这样不是我们想要的效果
if (time == null) {
time = setInterval(function () {
select()
}, 60)
}
}
end.onclick = function () {
clearInterval(time)
time = null
}
来看一看完整的效果。
OK，写到这里所有的步骤都已经完成了，最后祝大家都可以中他个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>
学识有限，如有错误或者不足，欢迎指出。
