js九宫格抽奖

简介: js九宫格抽奖

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

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;
            }

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

目录
相关文章
|
6月前
|
移动开发 JavaScript 前端开发
分享46个JS抽奖转盘,总有一款适合您
分享46个JS抽奖转盘,总有一款适合您
153 1
|
6月前
|
JavaScript 前端开发
js制作九宫格抽奖功能
js制作九宫格抽奖功能
50 0
|
14天前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
13 2
|
14天前
|
JavaScript
js学习--抽奖
js学习--抽奖
10 1
|
3月前
|
JavaScript 前端开发
JS九宫格抽奖制作
JS九宫格抽奖制作
32 0
|
3月前
|
JavaScript
js之九宫格抽奖
js之九宫格抽奖
30 0
|
5月前
|
JavaScript 前端开发
JS九宫格抽奖
JS九宫格抽奖
|
6月前
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖
33 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
84 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
105 4