先在body里面設(shè)置幾個(gè)盒子

    <div id="content"> </div>
    <button id="kaishi">開始</button>
    <button id="jieshu">結(jié)束</button>

接下來給上面的盒子加上一些樣式讓他有那個(gè)模樣；

*{
    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;
     }

大概就是上面圖片里面這樣了

//上面這個(gè)幾個(gè)球是我用js給加上去的
以下是重點(diǎn)js

//雙色球揉抵，大工程，通俗易懂
function getname(name){//咱們可以封裝一個(gè)獲取id的函數(shù)躺屁，這樣很省力
    return document.getElementById(name)//返回獲取的id
}
var content = getname('content')//獲取大盒子的，賦值獲取的id一個(gè)名字
var kai = getname('kaishi')//獲取開始按鈕经宏，賦值獲取的id一個(gè)名字
var jie = getname('jieshu')//獲取結(jié)束按鈕犀暑，賦值獲取的id一個(gè)名字
console.log(content)//檢測(cè)是否與互聯(lián)成功
function getshu(start,end,many){//start為開始的值，end為結(jié)束值烛恤，many為幾個(gè)(下面解釋以下)
    var newshu =[ ]//新數(shù)組加個(gè)名
    while(newshu.length<many){//循環(huán)新數(shù)組的長(zhǎng)度少于many的數(shù)
        //賦值一個(gè)新數(shù)組添加一個(gè)隨機(jī)數(shù)隨機(jī)數(shù)就是上面的開始值和結(jié)束值母怜，結(jié)束值-開始值+1再加最小值;
        var shu =Math.floor(Math.random()*(end-start+1)+start)
        shu = shu<10?'0'+shu:shu;//這個(gè)隨機(jī)數(shù)若果小于十，如果bu是大于十就是自己
        if(newshu.indexOf(shu)==-1){//去重方法缚柏，讓新數(shù)組里面的數(shù)不重復(fù)
            newshu.push(shu)//把隨機(jī)到的數(shù)組塞到新數(shù)組里面
        }
    }
    newshu.sort(function(a,b){//把新數(shù)組里面的數(shù)排序
        return a-b;//a-b是從小到大排序
    })
    return newshu;//返回新的數(shù)組
}
console.log(getshu(1,32,6))//檢測(cè)封裝的這個(gè)函數(shù)是否能執(zhí)行
function gethtml(){//封裝起來里面的東西一會(huì)定時(shí)器用
    var hong = getshu(1,32,6)//紅色的球
    var lan = getshu(1,16,1)//藍(lán)色的球
    var quan =lan.concat(hong);//把紅色和藍(lán)色的球拼接起來
    var str ='';//賦值一個(gè)空字符串症汹，讓他每次都能重新為空
    for(var i in quan){//for...in循環(huán)上面拼接起來的
        str += `<span>${quan[i]}</span>`//讓上面賦值的新字符串
        content.innerHTML =str//把上面賦值的寫入到content內(nèi)容里面
}
}
gethtml()
var timer =null//賦值一個(gè)新的名為空
kai.onclick = function(){//kai的點(diǎn)擊事件
    timer = setInterval(gethtml,200)//給上面的函數(shù)一個(gè)定時(shí)器讓他點(diǎn)擊動(dòng)起來
    kai.disabled = true//讓kai的點(diǎn)擊按鈕消失
}
jie.onclick = function(){//結(jié)束按鈕的點(diǎn)擊事件
    timer = clearInterval(timer)//清楚這個(gè)上面的定時(shí)器
    timer =null//讓這個(gè)定時(shí)器重新賦為空
    kai.disabled = false//點(diǎn)擊結(jié)束按鈕讓開始按鈕從新出現(xiàn)
}