先在body里面设置几个盒子
<div id="content"> </div>
<button id="kaishi">开始</button>
<button id="jieshu">结束</button>
接下来给上面的盒子加上一些样式让他有那个模样；
*{
margin: 0;
padding: 0;
}
#content span{
width: 80px;
height: 80px;
border: solid 2px red;
display: inline-block;
margin: 30px 10px;
border-radius: 80px;
font-size: 30px;
line-height: 80px;
text-align: center;
}
#content span:last-child{
border-color: blue;
}
button{
width: 80px;
height: 80px;
margin: 30px 10px;
}
大概就是上面图片里面这样了
//上面这个几个球是我用js给加上去的
以下是重点js
//双色球，大工程，通俗易懂
function getname(name){//咱们可以封装一个获取id的函数，这样很省力
return document.getElementById(name)//返回获取的id
}
var content = getname('content')//获取大盒子的，赋值获取的id一个名字
var kai = getname('kaishi')//获取开始按钮，赋值获取的id一个名字
var jie = getname('jieshu')//获取结束按钮，赋值获取的id一个名字
console.log(content)//检测是否与互联成功
function getshu(start,end,many){//start为开始的值，end为结束值，many为几个(下面解释以下)
var newshu =[ ]//新数组加个名
while(newshu.length<many){//循环新数组的长度少于many的数
//赋值一个新数组添加一个随机数随机数就是上面的开始值和结束值，结束值-开始值+1再加最小值;
var shu =Math.floor(Math.random()*(end-start+1)+start)
shu = shu<10?'0'+shu:shu;//这个随机数若果小于十，如果bu是大于十就是自己
if(newshu.indexOf(shu)==-1){//去重方法，让新数组里面的数不重复
newshu.push(shu)//把随机到的数组塞到新数组里面
}
}
newshu.sort(function(a,b){//把新数组里面的数排序
return a-b;//a-b是从小到大排序
})
return newshu;//返回新的数组
}
console.log(getshu(1,32,6))//检测封装的这个函数是否能执行
function gethtml(){//封装起来里面的东西一会定时器用
var hong = getshu(1,32,6)//红色的球
var lan = getshu(1,16,1)//蓝色的球
var quan =lan.concat(hong);//把红色和蓝色的球拼接起来
var str ='';//赋值一个空字符串，让他每次都能重新为空
for(var i in quan){//for...in循环上面拼接起来的
str += `<span>${quan[i]}</span>`//让上面赋值的新字符串
content.innerHTML =str//把上面赋值的写入到content内容里面
}
}
gethtml()
var timer =null//赋值一个新的名为空
kai.onclick = function(){//kai的点击事件
timer = setInterval(gethtml,200)//给上面的函数一个定时器让他点击动起来
kai.disabled = true//让kai的点击按钮消失
}
jie.onclick = function(){//结束按钮的点击事件
timer = clearInterval(timer)//清楚这个上面的定时器
timer =null//让这个定时器重新赋为空
kai.disabled = false//点击结束按钮让开始按钮从新出现
}
