JavaScript——setTimeout()制作简易计时器

不得不说，setTimeout()是一个非常神奇的东西，我们可以用它来掌控时间，从而达到意想不到的结果。

这里先看一下setTimeout()的定义。 

定义和用法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

提示： 1000 毫秒= 1 秒。

提示： 如果你只想重复执行可以使用 setInterval() 方法。

提示： 使用 clearTimeout() 方法来阻止函数的执行。

 说白了，setTimeout()的作用就是用来设定一个时间, 时间到了, 就会执行一个指定的 method。

下面是setTimeout()方法的使用合集。

1.  延时弹框

请等待三秒钟

打开网页，等待3000ms，即3s后，弹框。

当然，我们也可以通过按钮来唤出弹窗。

点击按钮，进行加载。
点我

运行情况如下：

2.打开一个新窗口，等待几秒后关闭该窗口。

运行结果如下：

3秒后该窗口关闭。

3. 计数器

开始计数!

停止计数!

点击 "开始计数!" 按钮开始执行计数程序。
输入框从 0 开始计算。 
点击 "停止计数!" 按钮停止后，可以再次点击点击 "开始计数!" 按钮会重新开始计数。

这段代码最主要的是语句块是

function timedCount()
 {
    document.getElementById("txt").value = c;
    c = c + 1;
    t = setTimeout(function(){ timedCount() }, 1000);
    //一秒钟调用几次timedCount函数，即每秒计数一次
}

timedCount函数中调用了setTimeout函数，通过setTimeout函数调用自己，而延时设置为1000，即1s，这样就达到了每秒计时的功能。

效果如下

当然，我们真正的计时器都是会区分分钟和秒钟的，因此我们可以设置一个判断条件，通过if语句来限制它，如

function timedCount( )
{　if ( x < 60 )
　　　{　x = x + 1
　　　　 document.getElementById("txt").value = c;
        c = c + 1;
        t = setTimeout(function(){ timedCount() }, 1000);
        //一秒钟调用几次timedCount函数，即每秒计数一次
　　}
}

这样的话，我们就可以做一个稍微复杂一点的计时器。代码如下：

 




 


 
 
 你在本网页的连线时间是:

 


 
 分 

 

 
 
 秒。
 
 

这网页有两个 script, 第一个是设定 countSec( ) 和countMin()这两个 function, 第二个在后的是在网页完全载入后, 就启动这两个function。这个计时器并不是通过进位来实现的。countMin()函数设定六十秒后+1，countSec()函数每秒+1，这样达到计时的效果。

运行效果如下：

这个事简易的计时器，如果大家想更细致一些，可以在这个基础上添加功能。