知识储备（温故而知新）：
①封装获取节点方法
②while循环，和if相类似，能够满足条件去重，并且返回要求的长度
var arr = []
while(arr.length < many){
if (arr.indexOf(sui_num) == -1) { //sui_num随机数
arr.push(sui_num)
// console.log(arr)
}
}
③点击事件的运用
start.onclick =function(){
timer = setInterval(function(){
getBall()
},100)
start.disabled = true;
}
代码详情：
1.Html部分
<body>
<div id="content">
</div>
<button id="start">
开始
</button>
<button id="end">
结束
</button>
</body>
2.css部分
<style>
#content span {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px red solid;
font-size: 30px;
line-height: 50px;
text-align: center;
}
#content span:last-child {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px blue solid;
font-size: 30px;
line-height: 50px;
text-align: center;
}
</style>
3.js部分
//封装获取元素节点
function getId(can) {
return document.getElementById(can)
}
var content = getId('content');
var start = getId('start');
var end = getId('end');
var timer = null;
//封装随机几位数的号
function getNum(start_num, end_num, many) {//many几位数
var arr = [];
while (arr.length < many) {
var sui_num = Math.floor(Math.random() * (end_num - start_num + 1) + start_num); //得到一个随机数
sui_num < 10 ? sui_num = '0' + sui_num : sui_num = sui_num;//小于10加0
if (arr.indexOf(sui_num) == -1) {//数组去重
arr.push(sui_num) //没有重复的数放进去
// console.log(arr)
}
// console.log(sui_num)
}
arr.sort(function(a,b){
return a-b;
})//数组排序
return arr //返回数组
}
//封装写进页面为定时器准备
function getBall() {
str='';
var redball = getNum(1, 32, 6); //调用红球
var blueball = getNum(1, 16, 1);//调用篮球
var sball = redball.concat(blueball); //拼接新的
// 遍历数组并写进页面
for (var i in sball) {
// str= content.innerHTML += `<span> ${sball[i]}</span>`
str += ` <span> ${sball[i]}</span>   `;
}
content.innerHTML =str;
}
getBall() //先调用 ，网页就有
//点击就调用函数
start.onclick =function(){
timer = setInterval(function(){
getBall()
},100)
start.disabled = true; //开始按钮禁用
}
end.onclick=function(){
clearInterval(timer); //清楚定时器
timer =null;
start.disabled = false; //开始按钮恢复
}
