JavaScript中setTimeout()的使用详解-js教程-PHP中文网

JavaScript中setTimeout()的使用详解

黄舟

发布： 2017-12-04 10:24:43

原创

1788人浏览过

javascript中settimeout方法用处比较多，通常用在页面刷新了、延迟执行了等等、但是很多javascript新手对settimeout的用法还是不是很了解、今天就给大家介绍下javascript中settimeout()的使用详解！

setTimeout的用法

让我们一起来运行一个案例，首先打开记事本，将下面代码贴入，运行一下效果！

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> haorooms博客示范网页 </font> </h1>
<p> 请等三秒!</p>

<script>
setTimeout("alert(&#39;对不起, haorooms博客要你等候多时&#39;)", 3000 )
</script>

</body> 
</html>

登录后复制

页面会在停留三秒之后弹出对画框！这个案例应用了setTimeout最基本的语法，setTimeout不会自动重复执行！

setTimeout也可以执行function，还可以不断重复执行！我们再来一起做一个案例：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var x = 0
function countSecond()
{
   x = x+1
　 document.haorooms.haoroomsinput.value=x
　 setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>

<form name="haorooms">
   <input type="text" name="haoroomsinput"value="0" size=4 >
</form>

<script>
countSecond()
</script>

</body> </html>

登录后复制

你可以看到input文本框中的数字在一秒一秒的递增！所以，setTimeout也可以制作网页中的时间跳动！

没有案例，学习起来不会很快，我们再来一起做一个例子，计算你在haorooms某个页面的停留时间：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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> 你在haorooms博客中的停留时间是: </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>

登录后复制

怎么样，通过上面的例子，对setTimeout（）的用法，相信你都了解了吧！

总结：

通过上面的讲解，不知道您对setTimeout了解了没有，下次使用setTimeout会不会很熟练、希望对你的工作有所帮助！

相关推荐：

setTimeout实例

js中的setTimeout()函数

javascript函数setTimeout带参数用法实例详解

从setTimeout来谈谈说事件循环模型

以上就是JavaScript中setTimeout()的使用详解的详细内容，更多请关注php中文网其它相关文章！