javascript定时器做一个又快到慢的点名/抽奖效果

最新推荐文章于 2024-04-23 19:16:51 发布

DonkeyMini

最新推荐文章于 2024-04-23 19:16:51 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript/Jquery

本文链接：https://blog.youkuaiyun.com/DonkeyMini/article/details/73604379

JavaScript/Jquery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何利用JavaScript的setTimeOut()和setInterval()方法来创建一个从快到慢的点名或抽奖效果。setTimeOut用于单次延迟执行函数，setInterval则用于周期性重复调用函数。通过这两个函数的巧妙结合，可以实现动态且吸引人的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

What

1.Window对象的setTimeOut()&setInterval()用来注册在指定的时间之后单次或重复调用的函数。

2.都是客户端javascript中的全局函数。

3.①setTimeOut()方法：实现一个函数在指定的毫秒数之后运行。setTimeOut返回以一个值，这个值可以传递给clearTimeout()，用于取消这个函数的执行。

②setInterval()在指定毫秒数之间重复调用。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名效果</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        .call-box{
            border: 1px solid #aaa;
            width: 300px;
            height: 250px;
            margin: 50px auto;
        }
        .call-box {
            position: relative;
        }
        .call-box div p {
            font-size: 50px;
            color: #999;
            padding: 50px;
        }
        .call-box>p{
            padding-left: 30px;
            font-size: 20px;
            color: #666;
            background: skyblue;
            width: 270px;
            height: 50px;
            line-height: 50px;
        }
        button{
            position: absolute;
            bottom: 10px;
            right: 20px;
        }
        </style>
</head>
<body>
    <div class="container">
        <!-- 要选取人员的名单 -->
        <table class="table table-hover">
            <caption>2009级8班名单</caption>
            <thead>
                <tr>
                    <td>学号</td>
                    <td class="stuSel">姓名</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>001</td>
                    <td class="stuSel">楚乔</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td class="stuSel">宇文玥</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td class="stuSel">燕洵</td>
                </tr>
                <tr>
                    <td>004</td>
                    <td class="stuSel">淳儿</td>
                </tr>
                <tr>
                    <td>005</td>
                    <td class="stuSel">月七</td>
                </tr>
                <tr>
                    <td>006</td>
                    <td class="stuSel">魏西风</td>
                </tr>
            </tbody>
        </table>
        <div class="call-box">
            <p>被选中的人是：</p>
            <div>
                <p id="randomSel">dsf</p>
            </div>
            <button id="random-call" class="resetStu btn btn-success btn-lg">点名</button>
        </div>
    </div>

    <script src="js/jquery-3.2.1.js"></script>
    <script>
        // 随机点名 By lys
        $("#random-call").on('click', function () {
            //拿到所有的人放在数组里
            let arrAll = [];
            let StuNameLis = document.getElementsByClassName('stuSel');
            for (let i = 0;i<StuNameLis.length; i++) {
                arrAll.push(StuNameLis[i].innerHTML);
            }
            //弹出框
            function showCha() {
                let timer1 = null;
                let timer3 = null;
                //设置名字
                function setNum() {
                    let randNum = parseInt(Math.random()*arrAll.length);
                    document.getElementById("randomSel").innerHTML = arrAll[randNum];
                };
                function timeTask() {
                    timer1 = setInterval(function () {
                        setNum();
                    }, 50);
                    // 快的
                    var timer2 = setTimeout(function () {
                        clearInterval(timer1);
                        timer3 = setInterval(function () {
                            setNum();
                        }, 300);
                    }, 3000);
                    var timer4 = setTimeout(function () {
                        clearInterval(timer3);
                    }, 4000);
                }
                timeTask();
            }
            showCha();
        });
        // end
    </script>
</body>
</html>