JS定时器和案例

最新推荐文章于 2024-07-15 16:14:38 发布

goodcaoyu

最新推荐文章于 2024-07-15 16:14:38 发布

阅读量218

点赞数

本文链接：https://blog.csdn.net/goodcaoyu/article/details/108570320

版权

1. 设置定时器

语法：setInterval(函数，时间)

注意：

函数书写时不能带括号

setInterval(fn,1000)//正确
setInterval(fn(),1000)//错误
//时间的最小设置不小于14ms

2. 清除定时器

语法：clearInterval(所清除的定时器名称)

3. 点击更换颜色案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #prizeDraw {
            width: 100px;
            height: 100px;
            background: rgba(255, 68, 253, 0.5);
            font-size: 30px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div id="prizeDraw"></div>
    <input type="button" value="开始" id="start">
    <input type="button" value="暂停" id="stop">

    <script>
        window.onload = function() {
            var timer = null;
            var num = 0;
            var i = 0;
            var arr = ['red', '#FF9D0C', '#DBFF0D', '#3BFF0D', '#0DFFA2', '#0DE8FF', '#0D52FF', '#210DFF', '#930DFF', '#FF0DB4']
            var start = document.getElementById('start');
            var stop = document.getElementById('stop');
            var prizeDraw = document.getElementById('prizeDraw');
            start.onclick = function() {
                clearInterval(timer);
                timer = setInterval(function() {
                    num = Math.floor(Math.random() * 100 + 1);
                    prizeDraw.style.backgroundColor = arr[i];
                    i++;
                    if (i == 9) {
                        i = 0;
                    };
                    prizeDraw.innerHTML = num;
                }, 100);
            }
            stop.onclick = function() {
                clearInterval(timer);
            }
        }
    </script>
</body>

</html>

在这里插入图片描述