抽奖小游戏

html：

<div id="warp">
            
        </div>
        <button id="start">开始</button>
        <button id="end">停止</button>

css:

 #warp{
                width: 600px;
                height: 600px;
                position: relative;
            }
            #warp div{
                width: 198px;
                height: 198px;
                background-color: #dedede;
                position: absolute;
                border: 1px solid sandybrown;
                line-height: 200px;
                text-align: center;
            }
            #warp .active{
                background-color: red;
                color: white;
            }
            #start{
                width: 80px;
                height: 30px;
                position: relative;
                left: 220px;
                top: -300px;
            }
            #end{
                width: 80px;
                height: 30px;
                position: relative;
                left: 220px;
                top: -300px;
            }

js:

var goodList=["iphone14","苹果电脑","华为p30","兰博基尼","路虎","钻石","10元代金卷","谢谢惠顾"]
           var list=["谢谢惠顾","苹果电脑","iphone14","谢谢惠顾","谢谢惠顾","谢谢惠顾","谢谢惠顾","谢谢惠顾","10元代金卷","10元代金卷","10元代金卷","10元代金卷","10元代金卷","兰博基尼","华为p30"]
           var randomGood  //随机的商品
           //获取a,b之间任意一个的随机数
           function random(a,b){
               return Math.floor(Math.random()*(b-a+1))+a
           }
           // console.log(random(0,list.length-1))
           for(var i=0;i<goodList.length;i++){
               warp.innerHTML+=`<div>${goodList[i]}</div>`
           } 
           var items=warp.children//获取warp子元素
           items[1].style.left="200px"
           items[2].style.left="400px"
           items[3].style.left="400px"
           items[3].style.top="200px"
           items[4].style.left="400px"
           items[4].style.top="400px"
           items[5].style.left="200px"
           items[5].style.top="400px" 
           items[6].style.top="400px"
           items[7].style.top="200px"
           
           var x=0//记录当前要高亮的div
           items[x].className="active"
           
           var t  //定时器的初始值
           
           function f1(){
               items[x].className=""//把高亮状态取消
               x++
               if(x>7){
                   x=0
               }
               items[x].className="active"//把高亮状态加上
               if(flag){
                   t-=10
                   if(t<=80){
                       t=80
                   }
               }else{
                    t+=10
                    if(t>=500){
                        t=500
                        if(items[x].innerHTML==randomGood){
                            // alert("恭喜你抽取了")
                            flag=true
                            return
                        }
                    }
                }
               setTimeout(f1,t)
           }
           var flag=true
           //点击开始按钮
           start.οnclick=function(){
            if(flag=true){
                t=200
                randomGood=list[random(0,list.length-1)]//中间商品
                f1()
            }   
           }
           end.οnclick=function(){
               flag=false
           }