JavaScript计时事件

最新推荐文章于 2024-09-20 20:19:51 发布

sleepwalker_1992

最新推荐文章于 2024-09-20 20:19:51 发布

阅读量303

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80784134

版权

JavaScript 专栏收录该内容

57 篇文章 2 订阅

订阅专栏

在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。称之为计时事件。

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

clearInterval() - 用于停止 setInterval() 方法执行的函数代码。

setTimeout() - 在指定的毫秒数后执行指定代码。

clearTimeout() - 用于停止setTimeout()方法执行的函数代码，会清除setTimeout()占用的内存空间。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

一次性定时器

案例：一闪一闪亮晶晶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            position: relative;
            background-color: #000;
            border: 2px solid red;
        }
        span{
            color: yellow;
            font-size: 26px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        setInterval(function () {
            var box=document.getElementById("box");
            box.innerHTML="<span>★</span>";
            var x=parseInt(Math.random()*400);
            var y=parseInt(Math.random()*400);
            box.firstElementChild.style.left=x+"px";
            box.firstElementChild.style.top=y+"px";
        },10);
    </script>
</body>
</html>

案例：一起摇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            position:absolute;
        }
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <input type="button" value="摇起来" id="btn1">
    <input type="button" value="停止" id="btn2">
    <div id="box">
        <img src="1.jpg" alt="">
        <img src="2.jpg" alt="">
    </div>
    <script>
        var timeId="";
        document.getElementById("btn1").οnclick=function () {
            timeId=setInterval(function(){
                var x=parseInt(Math.random()*100+1);
                var y=parseInt(Math.random()*100+1);
                var box=document.getElementById("box");
                box.style.left=x+"px";
                box.style.top=y+"px";
            },100);
        };
        document.getElementById("btn2").οnclick=function () {
            clearInterval(timeId);
        }
    </script>
</body>
</html>

案例：协议按钮禁用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10">
    请仔细阅读本协议，然后才能注册账号，登陆。
    </textarea>
    <br/>
    <input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled">
    <script>
        var time=5;
        var timeId=setInterval(function() {
            var btn=document.getElementById("btn");
            time--;
            btn.value="请仔细阅读协议("+time+")";
            if(time<=0){
                clearInterval(timeId);
                btn.value="同意";
                btn.disabled=false;
            }
        },1000);
    </script>
</body>
</html>

案例：div背景颜色渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: orangered;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="btn">渐变</button>
    <script>
        document.getElementById("btn").οnclick=function () {
            var box=document.getElementById("box");
            var opacity=10;
            var timeId=setInterval(function () {
                opacity--;
                if(opacity<=0){
                    clearInterval(timeId);
                }
                box.style.opacity=opacity/10;
            },200);
        };
    </script>
</body>
</html>

案例：盒子逐渐变大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: orangered;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="btn">渐变</button>
    <script>
        document.getElementById("btn").οnclick=function () {
            var box=document.getElementById("box");
            var opacity=10;
            var timeId=setInterval(function () {
                opacity--;
                if(opacity<=0){
                    clearInterval(timeId);
                }
                box.style.opacity=opacity/10;
            },200);
        };
    </script>
</body>
</html>