时钟计时

一.计时器的两种类型:

1.一次性计时器:仅在指定的延迟时间之后触发一次。

2.间隔性触发计时器:每隔一定的时间间隔就触发一次。

二.计时器的四种方法:

1 .setTimeout():指定的延迟时间之后来执行代码。
2. clearTimeout():取消setTimeout()设置。
3. setInterval():每隔指定的时间执行代码。
4 .clearInterval():取消setInterval()设置。

三.下面就分开来介绍一下各个方法的使用:

1.setInterval():语法。
setInterval(代码,交互时间);
代码:要调用的函数或要执行的代码串。
交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。
例如:function  ex(){
            console.log("1234");    
            }
   var   interval=setInterval(function(){ ex()},1000)

这样的代码实现结果就是会在f12的console界面每隔一秒输出一次1234;


2.setTimeout():语法
setTimeout(代码,延迟时间);
代码:要调用的函数或要执行的代码串。 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。
例如:同样,与setInterval使用同一函数。即
function  ex(){
            console.log("1234");    
            }
   var   timeout=setTimeout(function(){ ex()},1000)
实现的结果就会是在页面加载完成后延时一秒在console界面输出一次1234;

3.clearInterval()与clearTimeout():语法

代码:触发事件,在循环结束判断后触发或鼠标键盘相应操作触发,触发后暂停括号内时钟对象的时钟执行

例如:ex.onmouseenter=function(){

              clearsetInterval(interval);

           }

实现的结果就会是在鼠标进入ex(ex已是获取div后的对象)后停止interval的计时,即在console界面在鼠标

进入事件被触发后停止输出1234,直到interval被再次调用;

这两种代码的不同区别只是作用对象不同,clearInterval只能作用于setInterval时钟计时器;

同理:clearTimeout只能作用于setTimeout的时钟计时器。


总结:JavaScript计时器的使用尤为广泛,比如轮播图,倒计时等方面应用较多,可以说,计时器是JavaScript比较重要的一部分。




猜你喜欢

转载自blog.csdn.net/dracarys__/article/details/80345584