先在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//点击结束按钮让开始按钮从新出现
}