JavaScript中的几种计时操作

「已注销」

已于 2022-03-30 19:26:32 修改

阅读量6.4k

点赞数 2

分类专栏： # 六 web前端+vue 文章标签：开发语言程序人生

于 2022-03-30 19:25:54 首次发布

本文链接：https://blog.csdn.net/CNMBZY/article/details/123842899

版权

六 web前端+vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

系列文章目录

例如：第一章 Python 机器学习入门之pandas的使用

文章目录

系列文章目录
前言
一、JavaScript中的两种常用计时函数
二、详细代码
总结

前言

JavaScript 一个设定的时间间隔之后来执行代码，我们称之为计时事件

一、JavaScript中的两种常用计时函数

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

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

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

二、详细代码

1.一次性计时器setTimeout

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>你所看的内容九秒之后消失</h1>
    <script>
        function bian(){
            document.body.style.backgroundColor="black";
        }
        //九秒以后调用，相当于延迟效果
        setTimeout(bian,9000);
    </script>
</body>
</html>

2.周期性计数器

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        用JS实现变化的字体，哈哈哈，一秒一变色，也就是周期触发代码的效果
        核心是setInterval(1,2)，周期性计时器
        1：执行语句
        2：时间周期，单位为毫秒
    -->
    </div>
    <h1 id="title">速度考研，极速入职</h1>
    <script>
        var colors = ["red","blue","yelllow","pink","orange","black"];
        var i=0;
        function bian(){
            document.getElementById("title").style.color=colors[i++];
            if(i==colors.length){
                i=0;
            }
            
        }
        setInterval(bian,2000);
        //每隔0.1秒，执行一次bian函数

    </script>
</body>
</html>

用JS实现变化的字体，哈哈哈，一秒一变色，也就是周期触发代码的效果
核心是setInterval(1,2)，周期性计时器
1：执行语句
2：时间周期，单位为毫秒

3.闪烁的电子时钟

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="title"></h1>
    <script>
        //函数名称
        var colors=["red","blue","yellow","black","orange","black"];
        var i=0;
       //函数体
        function bian(){
            document.getElementById("title").style.color=colors[i++];
            if(i==colors.length){
                i=0;
            }
        }
        //注意时间函数中的顺序，与时分秒的基本命名规范
        function time(){
            var d=new Date();
            var str=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"号"+
            d.getHours()+"点"+d.getMinutes()+"分"+d.getSeconds()+"秒";
            document.getElementById("title").innerHTML=str;
        }
        //调用函数
        setInterval(bian,100);
        setInterval(time,1000);
    </script>
</body>
</html>

构造了速度不同的两个setInterval函数

4.停止计数器clearInterval

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="tu" src="img/1.jpg" width="50%" />
    <br>
    <button onclick="begin()">开始</button>
    <button onclick="stop()">停止</button>

    <script>
        var arr =["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
        function begin(){
            timer = setInterval(bian,100);
        }
        function stop(){
            clearInterval(timer);
        }
        function bian(){
            var i =Math.floor(Math.random()*arr.length);
            document.getElementById("tu").src="img/"+arr[i];

        }
    </script>

</body>
</html>