使用js实现抽奖效果

最新推荐文章于 2024-07-05 03:32:39 发布

李同学上课啦

最新推荐文章于 2024-07-05 03:32:39 发布

阅读量1k

点赞数 1

分类专栏：效果文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/DGL_CSDN/article/details/122839630

版权

效果专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<script>
    var arr =["张三","李四","罗五","柴六","马七",]
        //获取按钮
    var newArr = JSON.parse(JSON.stringify(arr));
    var start = document.querySelector('.start')
        //获取姓名所在标签
    var p = document.querySelectorAll('p');
    var index = 0
    var timer, timers = null
        //点击按钮
    start.onclick = function() {
        //每次点击先关闭，计时器防止重新点击出现bug
        clearInterval(timer)
        clearInterval(timers)
        if (newArr.length < 1) {
            confirm('已经结束，要重新开始吗？')
        }
        var num = newArr.length
        timer = setInterval(() => {
            // 生成六个数
            var num = [];
            for (var i = 0; i < arr.length; i++) {
                num.push(i);
            };
            // 打乱重拍
            num.sort((a, b) => {
                return Math.random() > 0.5 ? 1 : -1;
            });
            // 将选到的名字循环添加到五个p标签中
            for (var i = 0; i <= p.length; i++) {
                p[i].innerHTML = arr[num[i]]
            }
            console.log(num);
        }, 100);
        start.innerHTML = "点名中..."
            //3秒后关闭计时器 并删除已点名的学生
        timers = setTimeout(() => {
            clearInterval(timer)
                // console.log(arr[index]);
            newArr.splice(index, 1)
            timer = null
            start.innerHTML = "开始点名"
        }, 3000);
    }
</script>

<body>
    <div class="box">
        <p>张三</p>
        <p>李四</p>
        <p>罗五</p>
        <p>柴六</p>
        <p>马七</p>
    </div>

    <button class="start">开始点名</button>
</body>

<style>
        body {
            background-color: #dbdbdb;
        }
        
        .box {
            width: 600px;
            height: 200px;
            background-color: pink;
            display: flex;
            justify-content: space-around;
            align-items: center;
            /* transform: translate(600px, 200px); */
            margin: 200px auto;
        }
        
        .start {
            width: 100px;
            height: 50px;
            border-radius: 10px;
            position: relative;
            left: 700px;
            top: -180px;
        }
    </style>

李同学上课啦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用js实现抽奖效果

<script> var arr =["张三","李四","罗五","柴六","马七",] //获取按钮 var newArr = JSON.parse(JSON.stringify(arr)); var start = document.querySelector('.start') //获取姓名所在标签 var p = document.querySelectorAll('p'); var index = 0 .
复制链接

扫一扫

专栏目录