cari

Rumah  >  Artikel  >  hujung hadapan web  >  JavaScript中setTimeout()的使用详解

JavaScript中setTimeout()的使用详解

黄舟
黄舟asal
2017-12-04 10:24:431992semak imbas

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来谈谈说事件循环模型

Atas ialah kandungan terperinci JavaScript中setTimeout()的使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS切换图片幻灯切换效果Artikel seterusnya：如何用AngularJS编程思想

Artikel berkaitan

Lihat lagi