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

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

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

定义和用法

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

提示： 1000 毫秒= 1 秒。

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

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

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

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

1. 延时弹框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>

<body>
<p>请等待三秒钟</p>

<script>
setTimeout("alert('hello，让您久等啦！')",3000)
</script>

</body>
</html>

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

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

<body>

<p>点击按钮，进行加载。</p>
<button onclick="myFunction()">点我</button>

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(alertFunc, 3000);
}

function alertFunc() {
  alert("加载成功!");
}
</script>

</body>

运行情况如下：

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<script>
var myWindow = window.open("", "", "width=200, height=100");
myWindow.document.write("<p>这是一个新窗口'</p>");
myWindow.document.write("<p>本窗口将在3秒后关闭'</p>");
setTimeout(function(){ myWindow.close() }, 3000);
</script>


</body>
</html>

运行结果如下：

3秒后该窗口关闭。

3. 计数器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<button onclick="startCount()">开始计数!</button>
<input type="text" id="txt">
<button onclick="stopCount()">停止计数!</button>

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

<script>
var c = 0;
var t;
var timer_is_on = 0;

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

function startCount() {
    if (!timer_is_on) {
        timer_is_on = 1;//判断条件
        timedCount();
    }
}

function stopCount() {
    clearTimeout(t);
    timer_is_on = 0;//判断条件
}
</script>

</body>
</html>

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

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函数，即每秒计数一次
　　}
}

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

<html> 
<head>
<script>
x=0
y=-1

function countMin( )
{　y=y+1
　 document.displayMin.displayBox.value=y
　 setTimeout("countMin( )",60000)
}

function countSec( )
{　x = x + 1
　 z =x % 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000)
}
</script>
</head>

<body> 


<table> <tr valign=top> <td> 你在本网页的连线时间是:</td>

<td> <form name=displayMin>
<input type="text" name="displayBox"value="0" size=4 >
</form> </td>
<td> 分 </td>

<td> <form name=displaySec></td>
<td> <input type="text" name="displayBox"value="0" size=4 >
</form> </td>
<td> 秒。</td> </tr> </table>

<script>
countMin( )
countSec( )
</script>
</body>
</html>

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

运行效果如下：

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

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

定义和用法

猜你喜欢