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

来源：互联网发布：人工智能的股票有哪些编辑：程序博客网时间：2024/05/16 18:24

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>

阅读全文

0 0