【抽奖大转盘】

    <ul>
        <li class="active">600元优惠券</li>
        <li>800元优惠券</li>
        <li>1000元优惠券</li>
        <li>100元优惠券</li>
        <li><button id="btn1">开始</button><button id="btn2">停止</button></li>
        <li>500元优惠券</li>
        <li>200元优惠券</li>
        <li>400元优惠券</li>
        <li>900元优惠券</li>
    </ul>

        *{
            padding: 0;
            margin: 0;
        }
        ul{
            width: 630px;
            height: 630px;           
            margin: 0 auto;
        }
        ul>li{
            list-style: none;
            width: 200px;
            height: 200px;
            line-height: 200px;
            background-color: #999;
            text-align: center;
            margin: 10px 10px 0 0;
            float: left;
        }
        .active{
            background-color: aqua;
        }

  // 找到开始 结束按钮
    var btn1=document.getElementById('btn1');
    var btn2=document.getElementById('btn2');
    var timer;
    // 拿到想要运动的顺序
    var arrIndex=[0,1,2,5,8,7,6,3];
    var num=0;
    var list=document.getElementsByTagName('li');
    btn1.onclick=function(){
        clearInterval(timer);
        timer=setInterval(function(){
            for(var item of list){
                item.className='';
            }
            num++;
            if(num>=arrIndex.length){
                num=0;
            }
            // console.log(list[arrIndex[num]]);
            list[arrIndex[num]].className='active';

        },100)
    }
    btn2.onclick=function(){
        clearInterval(timer);
    }