js实现转盘抽奖

简介: js实现转盘抽奖
<div class="box">
            <div class="div2">短裙</div>
            <div class="div3">口红</div>
            <div class="div4">草莓</div>
            <div class="div5">西瓜</div>
            <div class="div6">奶茶</div>
            <div class="div7">美甲</div>
            <div class="div8">谢谢参与</div>
            <div class="div9">苹果13</div>
            <strong class="button"> 点击抽奖</strong>
        </div>
* {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 340px;
                height: 340px;
                border: 1px #00FFFF solid;
                position: relative;
                margin: 100px;
            }
            .box div {
                width: 100px;
                height: 100px;
                background-color: royalblue;
                text-align: center;
                line-height: 100px;
            }
            .div2 {
                position: absolute;
                top: 10px;
                left: 10px;
            }
            .div3 {
                position: absolute;
                top: 10px;
                left: 120px;
            }
            .div4 {
                position: absolute;
                top: 10px;
                left: 230px;
            }
            .div5 {
                position: absolute;
                top: 120px;
                left: 230px;
            }
            .div6 {
                position: absolute;
                top: 230px;
                left: 230px;
            }
            .div7 {
                position: absolute;
                top: 230px;
                left: 120px;
            }
            .div8 {
                position: absolute;
                top: 230px;
                left: 10px;
            }
            .div9 {
                position: absolute;
                top: 120px;
                left: 10px;
            }
            .button {
                width: 100px;
                height: 100px;
                background-color: #62c6a3;
                position: absolute;
                text-align: center;
                line-height: 100px;
                top: 120px;
                left: 120px;
            }
let button = document.getElementsByClassName('button')[0];
            let box = document.getElementsByClassName('box')[0];
            let pirze = box.getElementsByTagName('div');
            let k = 0;
            let time = 500;
            let count = 0;
            let int;
            let rom = 0;
            button.onclick = eve;
            function eve() {
                pirze[k].style.background = "pink";
                int = setInterval(pu, time)
                rom = Math.floor(Math.random() * pirze.length);
                button.onclick = null;
            }
            function pu() {
                if (k < pirze.length - 1) {
                    k++;
                    pirze[k - 1].style.background = "royalblue";
                    pirze[k].style.background = "pink";
                } else {
                    k = 0;
                    count++;
                    pirze[pirze.length - 1].style.background = "royalblue";
                    pirze[k].style.background = "pink";
                }
                if (count <= 5) {
                    if (time <= 100) {
                        time = 100;
                    } else {
                        time -= 20;
                    }
                } else {
                    if (time >= 500) {
                        time = 500;
                    } else {
                        time += 20;
                    }
                }
                if (count > 7 && rom == k) {
                    clearInterval(int);
                    count = 0;
                    rom = 0;
                    time = 500;
                    button.onclick = eve;
                    let text = pirze[k].innerHTML;
                    setTimeout(function(){
                        alert("恭喜您获得:" + text);
                    },300)
                }else{
                    clearInterval(int);
                    int = setInterval(pu, time)
                }
            }

1. 获取按钮标签,并给它绑定点击事件,点击执行 eve 函数作为事件函数

2. 创建全局变量 k 初始为 0 ,表示为当前选中奖品的下标

3. 获取奖品列表,当点击后,先让第一个奖品修改背景颜色为粉色,也就是 k 下标对应的奖品

4. 创建全局变量 time 初始为 500 ,在点击事件函数内创建定时器,每隔 time 毫秒,执行 pu 函数

5. 获取奖品列表,并创建 pu 函数,在函数内判断 k 是否小于 7 (奖品的数量 - 1)

6. 如果小于7,执行 k++ 表示让当前选中的下标加一,让上一个奖品也就是 k - 1 下标对应的奖品颜色为蓝色

7. 并让当前选中的奖品也就是 k 下标对应的奖品背景颜色为粉色

8. 如果不小于7,表示 k 不能再自增了,需要重新初始为 0 ,

相关文章
|
7月前
|
移动开发 JavaScript 前端开发
分享46个JS抽奖转盘,总有一款适合您
分享46个JS抽奖转盘,总有一款适合您
178 1
|
7月前
|
JavaScript 前端开发
js制作九宫格抽奖功能
js制作九宫格抽奖功能
57 0
|
1月前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
46 3
原生js炫酷随机抽奖中奖效果代码
|
2月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
20 2
|
2月前
|
JavaScript
js学习--抽奖
js学习--抽奖
22 1
|
4月前
|
JavaScript 前端开发
JS九宫格抽奖制作
JS九宫格抽奖制作
36 0
|
4月前
|
JavaScript
js之九宫格抽奖
js之九宫格抽奖
36 0
|
6月前
|
JavaScript 前端开发
JS九宫格抽奖
JS九宫格抽奖
|
7月前
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖
39 0
|
7月前
|
JavaScript
JS动态转盘可自由设置个数与概率
JS动态转盘可自由设置个数与概率