双色球咋玩的：
“双色球”彩票投注区分为红色球号码区和蓝色球号码区。每注投注号码由6个红色球号码和1个蓝色球号码组成。
红色球号码从1--33中选择；蓝色球号码从1--16中选择。
有啥要求：
1、彩票号码随机输出，且无重复数字
2、不足两位的号码第一位补0
以下为实现代码：
html代码：
<div class="box">
红球：
<div class="redbull"></div>
蓝球：
<div class="bluebull"></div>
<div class="but">
<button type="button" id="start">开始</button> //创建开始按钮
<button type="button" id="stop">停止</button> //创建停止按钮
</div>
</div>
css样式：
span {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #333;
border-radius: 100%;
}
.red {
background: red;
color: #fff;
}
.blue {
background: blue;
color: #fff;
}
button {
width: 100px;
height: 50px;
background: deepskyblue;
border: none;
outline: none;
border-radius: 10px;
font-size: 25px;
}
button:hover {
background: rgb(3, 150, 106);
color: brown;
}
js代码：
var redbull = document.querySelector('.redbull'); //获取class名为redbull的第一个元素
var bulebull = document.querySelector('.bulebull');//获取class名为redbull的第一个元素
var action = document.querySelector('#action');//获取id名为redbull的第一个元素
var stop = document.querySelector('#stop');//获取id名为redbull的第一个元素
//用于生成红球蓝球的标签函数
var productionElement = function (count, targetElement) {
var str = '';
for (var j = 1; j <= count; j++) {
str += '<span>' + (j < 10 ? '0' + j : j) + '</span>';
}
// 操作dom不要在循环体内进行，非必要时刻只操作一次就可以
targetElement.innerHTML = str;
}
// 调用 productionElement函数生成32个红球元素
productionElement(32, redbull);
productionElement(16, bulebull);
// 获取随机数的函数
var randomCount = function (start, end) {
var len = end - start + 1;
return Math.floor(Math.random() * len + start);
}
// 生产数组
var productionArr = function (count, startCount, endCount) {
var arr = [];
while (arr.length < count) {
var result = randomCount(startCount, endCount);
if (arr.indexOf(result) === -1) {
arr.push(result);
}
}
return arr;
}
// 渲染页面
var renderPage = function (list, childrenElement, bg) {
for (var i = 0; i < childrenElement.length; i++) {
childrenElement[i].className = '';
}
for (var j = 0; j < list.length; j++) {
childrenElement[list[j] - 1].className = bg;
}
}
// 自动选择
var actionCheck = function () {
var result1 = productionArr(6, 1, 32);
var redbullTag = redbull.children;
var result2 = productionArr(1, 1, 16);
var bulebullTag = bulebull.children;
renderPage(result1, redbullTag, 'red');
renderPage(result2, bulebullTag, 'blue');
}
// 使用计时器点击开始按钮每200毫秒执行一次随机自动选择
var timer = null;
start.onclick = function () {
if (!timer) {
timer = setInterval(actionCheck, 200);
}
}
//点击停止按钮关闭定时器!
stop.onclick = function () {
clearInterval(timer);
timer = null;
双色球.JPG
