原生JS实现九宫格抽奖

<!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;//转到哪个位置
            var count= 0;//转圈初始值
            var totalCount = 9;//转动的总圈数
            var speed =500;//转圈速度，越大越慢
            var minSpeed =500;
            var timer;
            var isClick = true;
            var index = 3;//指定转到哪个奖品
            
            function roll(){
                //速度衰减
                speed -= 50;
                if(speed<=10){
                    speed=10;
                }
                //每次调用都去掉全部active类名
                for(var j=0;j<ali.length;j++){
                    ali[j].classList.remove('active');
                }
                i++;
                //计算转圈次数
                if(i>=ali.length-1){
                    i=0;
                    count++;
                }

                prize.innerHTML=arr[i];//旁边显示当前奖品
                
                ali[i].classList.add('active');//添加变色类名
                //满足转圈数和指定位置就停止
                if(count>=totalCount&&(i+1)==index){
                    clearTimeout(timer);
                    isClick=true;
                    speed=minSpeed;
                }else{
                    timer = setTimeout(roll,speed);//不满足条件时调用定时器
                    //最后一圈减速
                    if(count>=totalCount-1||speed<=50){
                        speed+=100;
                    }
                }
            }
            
            ali[ali.length-1].onclick = function(){
                if(isClick){
                    count= 0;
                    //随机产生中奖位置
//                  index = Math.floor(Math.random()*arr.length+1);
                    roll();
                    isClick=false;
                }
            }
        </script>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容