js九宫格抽奖

最新推荐文章于 2024-06-12 21:37:57 发布

嘘~！

最新推荐文章于 2024-06-12 21:37:57 发布

阅读量315

点赞数

文章标签： css3 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/zzx262625/article/details/129289309

版权

该文章展示了一个简单的九宫格抽奖程序的实现，利用JavaScript生成随机数确定中奖格子，并通过定时器控制转动速度和停止位置。HTML结构定义了九宫格布局，CSS用于美化。点击按钮启动抽奖，转动圈数和速度动态变化，达到设定条件时停止。

摘要由CSDN通过智能技术生成

利用随机数与定时器做一个简简单单的九宫格抽奖；

html部分：

        <div class="box">
            <div class="div1">1</div>
            <div class="div2">2</div>
            <div class="div3">3</div>
            <div class="div4">4</div>
            <div class="div5">5</div>
            <div class="div6">6</div>
            <div class="div7">7</div>
            <div class="div8">8</div>
            <strong class="button">点击抽奖</strong>
        </div>

js部分：

let button = document.getElementsByClassName('button')[0];
            
            let k = 0;
            
            let box = document.getElementsByClassName('box')[0];
            
            let prize = box.getElementsByTagName("div");
            
            let time = 100;
            
            let int;
            
            let num = 0;
            
            let count = 0;
            
            let rom = 0;
            
            //添加点击事件
            button.onclick = function(){
                
                prize[k].style.backgroundColor = "red";
                
                rom = Math.floor(Math.random() * prize.length);
                //计时器
                int = setInterval(scrolls,time);
                
            }
            //
            function scrolls(){
                if(k < prize.length - 1){
                    k++;
                    prize[k-1].style.backgroundColor = "aqua";
                    prize[k].style.backgroundColor = "red";
                }else{
                    k = 0;
                    prize[prize.length - 1].style.backgroundColor = "aqua";
                    prize[k].style.backgroundColor = "red";
                }
                //当圈数小于等于五时
                if(count <= 2){
                    //时间，速度
                    if(time <= 100){
                        time = 200;
                    }else{
                        time -= 0;
                    }
                }else{
                    if(time >= 500){
                        time = 400;
                    }else{
                        time += 20;
                    }
                }
                
                if(num == 4){
                    num = 0;
                    count++;
                }else{
                    num++;
                }
                //定时器
                if(count > 8 && rom == num){
                    clearInterval(int);
                }else{
                    clearInterval(int);
                    int = setInterval(scrolls,time);
                }    
            }

css部分各位可以凭借自己随机发挥；

*{
                margin: 0;
                padding: 0;
            }
            
            .box{
                width: 340px;
                height: 340px;
                border: 1px pink solid;
                position: relative;
                margin: 100px;
            }
            
            .box div{
                width: 100px;
                height: 100px;
                background-color: aqua;
                text-align: center;
                line-height: 100px;
            }
            
            .div1{
                position: absolute;
                top: 10px;
                left: 10px;
            }
            
            .div2{
                position: absolute;
                top: 10px;
                left: 120px;
            }
            
            .div3{
                position: absolute;
                top: 10px;
                left: 230px;
            }
            
            .div4{
                position: absolute;
                top: 120px;
                left: 230px;
            }
            
            .div5{
                position: absolute;
                top: 230px;
                left: 230px;
            }
            
            .div6{
                position: absolute;
                top: 230px;
                left: 120px;
            }
            
            .div7{
                position: absolute;
                top: 230px;
                left: 10px;
            }
            
            .div8{
                position: absolute;
                top: 120px;
                left: 10px;
            }
            
            .button{
                width: 100px;
                height: 100px;
                background-color: pink;
                text-align: center;
                line-height: 100px;
                position: absolute;
                top: 120px;
                left: 120px;
            }

主要就是设置定时器来控制转速，通过生成随机数来控值转的圈数及在第几格停留