模拟双色球的玩法，每次出现时会有6个红色的1-33数字的不重复小球，和一个1-16数字的蓝色小球，生成一组数字，便是中（做）彩（梦）票（中）了。
首先，先获取节点：
获取的节点较多，为了方(偷)便(懒）,封装一个快速获取节点id的函数
图片.png
因为双色球涉及到概率，随机数是必不可少的，为了方便，封装一个获取随机数的函数
图片.png
先声明一个空数组，来装入随机数，当所需要的数全部生成时，就可以生成了，所以用while方法来进行判断后，再执行，声明一个num作为每次生成的随机数，并且为了美观，当获得的随机数小于10时，会在随机数前拼接一个‘0’，根据双色球的规则，可以知道六个红球中的随机数字是不能重复的，所以要进行判断，当num的值时arr数组中所没有的值时，利用push()方法来进行获取，最后，利用sort()方法进行一个从小到大的排序
图片.png
生成的随机数组要不断进行调用，所以封装一个调用随机数，并写入网页的函数，将获取到的六个红球和一个兰球的随机数利用concat()方法进行拼接，并声明一个空字符串，保证每一次生成结束后，上一次生成的值不会出现，并在函数完成后，提前调用一次，以提前出现，方便观赏。
图片.png
最后，设置一个开始结束的定时器，就到了激(人)动(财)人（两）心（空）的抽奖时刻，点击开始时，开始键设置为不可再点击，以避免定时器运行的速度越来越快，点击结束时，恢复开始键的可选取状态，并停止计时器并清空，定时器以10毫秒的速度不断进行随机数组的选择。
<!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>
#content span {
width: 50px;
height: 50px;
border: 3px solid red;
margin: 10px 5px;
display: inline-block;
border-radius: 50%;
font-size: 30px;
line-height: 50px;
text-align: center;
}
#content span:last-child {
border-color: blue;
}
button {
width: 100px;
height: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="content">
</div>
<button id="start">开始</button>
<button id="end">结束</button>
<script>
// 获取节点
//封装获取数组的函数
//封装写入数字的函数
//定时器
function getId(name) {
return document.getElementById(name);
}
//获取的节点较多，封装一个获取id的函数，精简代码
var content = getId('content');
var start = getId('start');
var end = getId('end');
//创建一个函数，快速获取节点
function getNum(start_num, end_num, many) {
var arr = []
//建立一个空数组，存放获得的随机数
while (arr.length < many) {
var num = Math.floor(Math.random() * (end_num - start_num + 1) + start_num);
//获得总长度为many情况下生成的随机数
num = num < 10 ? '0' + num : num;
//当单个数字小于10时，会在单数前+0，便于美观
if (arr.indexOf(num == -1)) {
arr.push(num);
//将满足条件的数字放入空数组中
}
arr.sort((a, b) => {
return a - b
})
//将数组从小到大进行排序
}
return arr
}
function getHtml() {
var redball = getNum(1, 33, 6);
var blueball = getNum(1, 16, 1);
var balls = redball.concat(blueball);
//获得红球和篮球的随机数并拼接成最终的数组
var str = '';
for (var i in balls) {
str += `<span>${balls[i]}</span>`;
content.innerHTML = str;
//遍历数组，并将其中随机一组随机数写入到网页中
}
}
getHtml();
//先写一组，便于观看
var timer = {};
//初始化一个定时器
start.onclick = () => {
timer = setInterval(getHtml, 10);
start.disabled = true;
//设立一个10毫秒变化一次的随机数组，并在点击开始时，让开始键变得不可点击
}
end.onclick = () => {
clearInterval(timer);
timer=null
start.disabled = false;
//当停止时，点击结束键，会让开始键恢复点击
}
</script>
</body>
</html>
网友评论