js双色球

 html：

  <div id='qiu'>

    </div>
    <div class="btn">
        <button onclick="start()">开始</button>
        <button onclick="stop()">停止</button>
    </div>

script：

<script>
var arr = [],startS //arr 双色球数值数组，startS 定时器名字
//产生6个1-33的随机数
function fun(){
    let num = randNum(1,33) //调用随机数函数获取一个随机数
    if(arr.indexOf(num)==-1){ //判断获取的随机数是否重复
        arr.push(num)           //添加到数组
    }
    if(arr.length<6){   //如果数据长度还不足6个继续调用本函数
        fun()
    }
}
//指定范围随机数
function randNum(min, max) {
    return Math.floor(Math.random() * (max - min) +1) + min;
}
//定时器开始
function start(){
    clearInterval(startS) //防止点击多次开始 造成不能停止问题，先停在开始新的
    startS = setInterval("ssq()",10) //每隔多少毫秒调用一次函数
}
//定时器停止
function stop(){
    clearInterval(startS)
}
//双色球
function ssq(){
    arr = [] //先清空数据
    fun()    //调用随机数函数 获取6个随机数
    arr.push(randNum(1,16)) //添加最后一个篮球随机数
    var str = '' //定义html空字符串
    for(i in arr){ //循环已生成的数组
        if(i==arr.length-1){ //如果是最后一个篮球 背景色为蓝色
            str+="<div class='qiu' style='background:blue;'>"+arr[i]+"</div>"
        }else{
            //前面6个背景色为红色
            str+="<div class='qiu'>"+arr[i]+"</div>"
        }
    }
    //找对象把拼接好的html字符串写入页面中
    document.getElementById('qiu').innerHTML = str 
}
ssq() //开始执行
</script>

style：

<style>
    * {
        margin: 0px auto;
        text-align: center;
    }
    body{
        padding-top: 30px;
    }
    .qiu {
        width: 40px;
        height: 40px;
        background: red;
        border: 1px solid #333;
        border-radius: 25px;
        float: left;
        text-align: center;
        line-height: 40px;
        color: white;
        font-size: 21px;
        margin-left: 10px;
    }
    #qiu{
        display: inline-block;
    }
    .btn{
        display: inline-block;
    }
    button{
        width: 60px;
        height: 40px;
        float: left;
        margin-left: 15px;
    }
</style>