原生JS實現(xiàn)九宮格抽獎

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
                text-decoration: none;
            }
            .luckyDraw{
                width: 420px;
                margin: 0 auto;
            }
            .prize{
                font-size: 30px;
            }
            .lottery{
                width: 240px;
                margin: 30px auto;
                position: relative;
            }
            .lottery li{
                width: 80px;
                height: 80px;
                border: 1px solid #000;
                box-sizing: border-box;
                text-align: center;
                line-height: 80px;
                position: absolute;
            }
            .lottery li:nth-of-type(1){
                left: 0;
                top: 0;
            }
            .lottery li:nth-of-type(2){
                left: 80px;
                top: 0;
            }
            .lottery li:nth-of-type(3){
                left: 160px;
                top: 0;
            }
            .lottery li:nth-of-type(4){
                left: 160px;
                top: 80px;
            }
            .lottery li:nth-of-type(5){
                left: 160px;
                top: 160px;
            }
            .lottery li:nth-of-type(6){
                left: 80px;
                top: 160px;
            }
            .lottery li:nth-of-type(7){
                left: 0;
                top: 160px;
            }
            .lottery li:nth-of-type(8){
                left: 0;
                top: 80px;
            }
            .lottery li:nth-of-type(9){
                left: 80px;
                top: 80px;
                cursor: pointer;
                background: gold;
            }
            .active:after{
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.1);
            }
        </style>
    </head>
    <body>
        <div class="luckyDraw">
            <ul class="lottery">
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>點擊抽獎</li>
            </ul>
            <span class="prize">獎品</span>
        </div>
        
        <script>
            var arr = [1,2,3,4,5,6,7,8];
            var lottery = document.querySelector('.lottery');
            var prize = document.querySelector('.prize');
            var ali = lottery.querySelectorAll('li');
            
            var i=0;//轉(zhuǎn)到哪個位置
            var count= 0;//轉(zhuǎn)圈初始值
            var totalCount = 9;//轉(zhuǎn)動的總?cè)?shù)
            var speed =500;//轉(zhuǎn)圈速度，越大越慢
            var minSpeed =500;
            var timer;
            var isClick = true;
            var index = 3;//指定轉(zhuǎn)到哪個獎品
            
            function roll(){
                //速度衰減
                speed -= 50;
                if(speed<=10){
                    speed=10;
                }
                //每次調(diào)用都去掉全部active類名
                for(var j=0;j<ali.length;j++){
                    ali[j].classList.remove('active');
                }
                i++;
                //計算轉(zhuǎn)圈次數(shù)
                if(i>=ali.length-1){
                    i=0;
                    count++;
                }

                prize.innerHTML=arr[i];//旁邊顯示當前獎品
                
                ali[i].classList.add('active');//添加變色類名
                //滿足轉(zhuǎn)圈數(shù)和指定位置就停止
                if(count>=totalCount&&(i+1)==index){
                    clearTimeout(timer);
                    isClick=true;
                    speed=minSpeed;
                }else{
                    timer = setTimeout(roll,speed);//不滿足條件時調(diào)用定時器
                    //最后一圈減速
                    if(count>=totalCount-1||speed<=50){
                        speed+=100;
                    }
                }
            }
            
            ali[ali.length-1].onclick = function(){
                if(isClick){
                    count= 0;
                    //隨機產(chǎn)生中獎位置
//                  index = Math.floor(Math.random()*arr.length+1);
                    roll();
                    isClick=false;
                }
            }
        </script>
    </body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容