双色球呢,它是我们买彩票时见得那种随机抽取的几位幸运数字,所以今天我用代码的形式给大家简单讲解一下双色球的大体思路,
首先呢先获取内容和两个按钮,然后再封装函数获取随机数并给他去重,就是把里面相同的数字去掉,然后封装函数给获取的七位随机数写到页面上,最后呢再给开始结束按钮一个点击事件,里面再利用定时器,这个定时器呢,他有个毛病就是会重叠,每点一下就会加速,所以我们要给他来个禁用,结束的时候就把定时器清除掉,禁用也要给他解除;
具体代码如下:
<body>
<div id="content"></div>
<button id="start">开始</button>
<button id="end">结束</button>
</body>
//获取
function getname(name) {
return document.getElementById(name);
}
var content = getname('content');
var start = getname('start');
var end = getname('end');
//封装函数获取随机数,然后给他去重
function get(start_num, end_num, many) {
var newarr = [];//声明一个空数组,让他接收
while (newarr.length < many) {
var num = Math.floor(Math.random() * (end_num - start_num + 1) + start_num);//利用公式获取随机数
num = num < 10 ? '0' + num : num;//三目运算符;如果他的随机数里面有小于0的,就在她前面加个0,否则就是它本身;
if (newarr.indexOf(num) == -1) {//去重
newarr.push(num);
}
}
newarr.sort(function (a, b) {//排序
return a - b;
})
return newarr;
}
//封装随机数写入页面
function gethtml() {
var str = '';
var redball = get(1, 33, 6);
var balls = redball.concat(get(1, 16, 1));
// console.log(balls);
for (var i in balls) {
str += `<span>${balls[i]}</span>`;
}
content.innerHTML = str;
}
gethtml()//调用
//给开始 结束按钮设点击事件
var timer = null;//函数调用
start.onclick = function () {//开始设置点击事件
timer = setInterval(gethtml, 10);//空的时间名给他赋一个定时器
start.disabled = true;//定时器会重叠,越点越快,所以要给他禁用
}
end.onclick=function(){//结束点击事件
clearInterval(timer);//结束了所以要清除定时器
start.disabled=false;//false解除禁用
}