JS的setTimeout计时器

最新推荐文章于 2022-05-30 17:27:38 发布

息魄

最新推荐文章于 2022-05-30 17:27:38 发布

阅读量484

点赞数

本文链接：https://blog.csdn.net/T13533331461/article/details/99698258

版权

使用JavaScript可以使我们做到在一个设定的时间间隔之后再来执行相应的代码，而不是在函数被调用后就立即执行，这个功能就是 JavaScript中的计时事件。而要使用计时事件就需要用到JavaScript中的一个计时事件方法setTimeout，该方法可以使代码在未来的某个时间执行。

setTimeout方法需要用到两个参数，第一个参数是含有 JavaScript 语句的字符串。这个语句可以是一个提示框也可以是一个方法体，或者对函数的调用等等。第二个参数是指定一个时间，然后该方法会从当前时间起经过这个指定的时间之后执行第一个参数中的代码。

下面是用setTimeout来做的一个时钟功能的代码：

<html>

<head></head>

<body onload="NowTime()">

    时间：<span id="time"></span>



    <script type="text/javascript">

        function NowTime()

        {

            var day = new Date();

            var h = day.getHours();

            var m = day.getMinutes();

            var s = day.getSeconds();

            m = AddZero(m);

            s = AddZero(s);

            document.getElementById('time').innerHTML = h + ":" + m + ":" + s;

            setTimeout('NowTime()', 1000);

        }



        function AddZero(i)

        {

           if (i < 10)

            { i = "0" + i };

            return i;

        }

    </script>

</body>

</html>

这段代码在运行的时候就先用页面加载事件来调用javascript里的NowTime()方法，该方法用于获取系统的当前时间，获取当前时间的时分秒然后把获取到的分跟秒传给AddZero()方法，AddZero()方法用于判断传入的参数是否小于十，如果小于十则给参数加个零然后返回这个值，否则不作处理直接返回。接着把处理过后的值拼接起来放进span标签里面用于页面显示。最后也是最为关键的一步就是用setTimeout来实现时间更新的功能，这里的setTimeout方法每隔一秒调用一次NowTime()方法以此反反复复的执行从而实现时间更新。

上面的时钟例子中用到的setTimeout是程序开始运行之后就反复执行的，而setTimeout是可以通过另一个方法的调用来停止setTimeout运行的。setTimeout() 方法可以返回一个值。而这个值可以用于停止setTimeout() 方法的调用。假如你希望取消这个 setTimeout()，你就需要把setTimeout() 方法返回的值传给clearTimeout()方法。

var a;

a = setTimeout('NowTime()', 1000);

function Stop()

{

     clearTimeout(a);

}

首先声明个全局变量a，然后在把setTimeout() 方法返回的值赋值给变量a，最后写一个停止的方法，方法内把变量a传给clearTimeout()方法即可把setTimeout() 方法停止。

息魄

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS的setTimeout计时器

使用JavaScript可以使我们做到在一个设定的时间间隔之后再来执行相应的代码，而不是在函数被调用后就立即执行，这个功能就是 JavaScript中的计时事件。而要使用计时事件就需要用到JavaScript中的一个计时事件方法setTimeout，该方法可以使代码在未来的某个时间执行。setTimeout方法需要用到两个参数，第一个参数是含有 JavaScript 语句的字符串。这个语句可以...
复制链接

扫一扫