首頁 > web前端 > js教程 > JavaScript中setTimeout()的使用詳解

JavaScript中setTimeout()的使用詳解

黄舟
發布: 2017-12-04 10:24:43
原創
2026 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板