Javascript進階篇——瀏覽器對象—JavaScript計時器

来源:http://www.cnblogs.com/alice-shan/archive/2016/03/04/5242809.html
-Advertisement-
Play Games

---恢復內容開始--- JavaScript 計時器在JavaScript中，我們可以在設定的時間間隔之後來執行代碼，而不是在函數被調用後立即執行。計時器類型：一次性計時器：僅在指定的延遲時間之後觸發一次。間隔性觸發計時器：每隔一定的時間間隔就觸發一次。計時器方法： 計時器setInterval(


---恢復內容開始---

JavaScript 計時器
在JavaScript中，我們可以在設定的時間間隔之後來執行代碼，而不是在函數被調用後立即執行。
計時器類型：
一次性計時器：僅在指定的延遲時間之後觸發一次。
間隔性觸發計時器：每隔一定的時間間隔就觸發一次。
計時器方法：

 

 

 

計時器setInterval()
在執行時,從載入頁面後每隔指定的時間執行代碼。
語法:

setInterval(代碼,交互時間);
//1. 代碼：要調用的函數或要執行的代碼串。
//2. 交互時間：周期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。

返回值:
　　一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執行的值。
　　調用函數格式(假設有一個clock()函數):

setInterval("clock()",1000)
//或
setInterval(clock,1000)

我們設置一個計時器，每隔100毫秒調用clock()函數，並將時間顯示出來，代碼如下:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>計時器</title>
 6 <script type="text/javascript">
 7     var int=setInterval(clock, 100)
 8     function clock(){
 9         var time=new Date();
10         document.getElementById("clock").value = time;
11     }
12 </script>
13 </head>
14 <body>
15     <form>
16         <input type="text" id="clock" size="50" />
17     </form>
18 </body>
19 </html>

例：定時器獲取時間，格式"時:分:秒"

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定時器</title>
<script type="text/javascript">
    var attime;
    function clock(){
        var time=new Date();          
        attime= time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
        document.getElementById("clock").value = attime;
    }
    setInterval(clock);
</script>
</head>
<body>
    <form>
        <input type="text" id="clock" size="50"  />
    </form>
</body>
</html>

運行結果：

 

 

 

取消計時器clearInterval()
clearInterval() 方法可取消由 setInterval() 設置的交互時間。
語法：

clearInterval(id_of_setInterval)
//參數說明:
//id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒調用 clock() 函數,並顯示時間。當點擊按鈕時，停止時間,代碼如下:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>計時器</title>
 6 <script type="text/javascript">
 7     function clock(){
 8         var time=new Date();                     
 9         document.getElementById("clock").value = time;
10     }
11     // 每隔100毫秒調用clock函數，並將返回值賦值給i
12     var i=setInterval("clock()",100);
13 </script>
14 </head>
15 <body>
16     <form>
17         <input type="text" id="clock" size="50"  />
18         <input type="button" value="Stop" onclick="clearInterval(i)"  />
19     </form>
20 </body>
21 </html>

 

 

 

計時器setTimeout()

setTimeout()計時器，在載入後延遲指定時間後,去執行一次表達式,僅執行一次。
語法:

setTimeout(代碼,延遲時間);
//參數說明：
//1. 要調用的函數或要執行的代碼串。
//2. 延時時間：在執行代碼前需等待的時間，以毫秒為單位（1s=1000ms)。

當我們打開網頁3秒後，在彈出一個提示框，代碼如下:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5     setTimeout("alert('Hello!')", 3000 );
 6 </script>
 7 </head>
 8 <body>
 9 </body>
10 </html>

當按鈕start被點擊時，setTimeout()調用函數，在5秒後彈出一個提示框。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5     function tinfo(){
 6         var t=setTimeout("alert('Hello!')",5000);
 7     }
 8 </script>
 9 </head>
10 <body>
11     <form>
12         <input type="button" value="start" onClick="tinfo()">
13     </form>
14 </body>
15 </html>

要創建一個運行於無窮迴圈中的計數器，我們需要編寫一個函數來調用其自身。在下麵的代碼，當按鈕被點擊後，輸入域便從0開始計數。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5     var num=0;
 6     function numCount(){
 7         document.getElementById('txt').value=num;
 8         num=num+1;
 9         setTimeout("numCount()",1000);
10     }
11 </script>
12 </head>
13 <body>
14     <form>
15         <input type="text" id="txt" />
16         <input type="button" value="Start" onClick="numCount()" />
17     </form>
18 </body>
19 </html>

使用setTimeout()實現計數統計效果，併在文本框中顯示數值。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>計時器</title>
 6 </head>
 7 <script type="text/javascript">
 8     var num=0;
 9     function startCount() {
10         document.getElementById('count').value=num;
11         num=num+1;
12         setTimeout("startCount()",1000);
13     }
14     setTimeout("startCount()",1000);
15 </script>
16 </head>
17 <body>
18     <form>
19         <input type="text" id="count"/>
20     </form>
21 </body>
22 </html>

 

 

 

 

取消計時器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止計時器。
語法:

clearTimeout(id_of_setTimeout)
//參數說明:
//id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。

下麵的例子和上節的無窮迴圈的例子相似。唯一不同是，現在我們添加了一個 "Stop" 按鈕來停止這個計數器：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5     var num=0,i;
 6     function timedCount(){
 7         document.getElementById('txt').value=num;
 8         num=num+1;
 9         i=setTimeout(timedCount,1000);
10     }
11     setTimeout(timedCount,1000);
12     //取消計時器，停止
13     function stopCount(){
14         clearTimeout(i);
15     }
16 </script>
17 </head>
18 <body>
19     <form>
20         <input type="text" id="txt">
21         <input type="button" value="Stop" onClick="stopCount()">
22     </form>
23 </body>
24 </html>

取消計時器。點擊Start按鈕後，開始計數。點擊Stop按鈕後，停止計數。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>計時器</title>
 6 </head>
 7 <script type="text/javascript">
 8     var num=0;
 9     var i;
10     function startCount(){
11     document.getElementById('count').value=num;
12         num=num+1;
13         i=setTimeout("startCount()",1000);
14     }
15     function stopCount(){
16        clearTimeout(i);
17     }
18 </script>
19 </head>
20 <body>
21     <form>
22         <input type="text" id="count" />
23         <input type="button" value="Start" onclick = startCount()/>
24         <input type="button" value="Stop" onclick = stopCount()/>
25     </form>
26 </body>
27 </html>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 何謂Restful
    引言 用過ASP.NET WebApi2.0， 上次去面試被問到什麼是Restful ，一時間竟不知道從何說起，所以搜集資料，做個備註，有時間好多來看看加深理解。 什麼是Restful 一種軟體架構風格，設計風格而不是標準，只是提供了一組設計原則和約束條件。它主要用於客戶端和伺服器交互類的軟體。基於
  • 面向對象七大設計原則的綜合闡述
    面向對象原則綜述 七大原則總脈絡圖： 註：1，2，3，4，5顯示的重要等級 常用的面向對象設計原則包括7個，這些原則並不是孤立存在的，它們相互依賴，相互補充。 下麵就是面向對象七個原則的一一解析 一、開閉原則 1. 開閉原則定義 ：一個軟體實體應當對擴展開放，對修改關閉。也就是說在設計一個模塊的時候
  • 【設計模式】15.解釋器模式
    1 package com.shejimoshi.behavioral.Interpreter; 2 3 4 /** 5 * 功能：演奏文本 6 * 時間：2016年3月3日上午9:26:19 7 * 作者：cutter_point 8 */ 9 public class PlayContext 1
  • 程式員七大面向對象設計原則
    在沒有瞭解到面向對象設計的7大原則前，我只是一隻豆子！ 但豆子終將會成長不是嗎？ 1.開閉原則：一個軟體實體應當對擴展開放，對修改關閉。也就是說在所涉及一個模塊的時候，應當使這個模塊可以在不被修改的前提下被擴展，即實現在不修改源代碼的情況下改變這個模塊的行為。 在開閉原則的定義中，軟體實體可以指一個
  • 定時器遇到的坑
    定時器開之前一定要清，這是我之前疏忽的，導致頁面倒計時占用記憶體，頁面崩潰。
  • 怎樣製作web版的folder treeview
    文件夾treeview的效果 這樣的treeview在實際項目中使用的場景較多。 既然用的多，那就DIY一遍，雖沒有面面俱到，但也要將其基本實現完成一遍。 1.先準備圖標素材 file.gif，文件圖標 folder.gif，文件夾打開中的圖標 folder-closed.gif，文件夾關閉著的圖標
  • BFC之寬度自適應佈局篇
    針對BFC的特性之一：BFC之間互不影響原則，so，我們可以實現超級無敵的寬度自適應佈局。詳情見隨筆
  • 『奇葩問題集錦』Zepto 頁面喚醒撥號功能點透
    不廢話直接上代碼： HTML： <a class="js-tel tel" data-tel="1312414"></a> JS： 1 // zepto tel 2 $('body').on('tap', '.js-tel', function() { 3 var _this = $(this);
一周排行
    -Advertisement-
    Play Games
  • C#TMS系統學習（BaseCity頁面）
    C#TMS系統代碼-基礎頁面BaseCity學習 本人純新手，剛進公司跟領導報道，我說我是java全棧，他問我會不會C#，我說大學學過，他說這個TMS系統就給你來管了。外包已經把代碼給我了，這幾天先把增刪改查的代碼背一下，說不定後面就要趕鴨子上架了 Service頁面 //using => impo ...
  • C# - 委托與事件
    委托與事件 委托 委托的定義 委托是C#中的一種類型，用於存儲對方法的引用。它允許將方法作為參數傳遞給其他方法，實現回調、事件處理和動態調用等功能。通俗來講，就是委托包含方法的記憶體地址，方法匹配與委托相同的簽名，因此通過使用正確的參數類型來調用方法。 委托的特性 引用方法：委托允許存儲對方法的引用， ...
  • 解析 ABP vNext 依賴註入實現【屬性註入】的原理
    前言 這幾天閑來沒事看看ABP vNext的文檔和源碼，關於關於依賴註入(屬性註入)這塊兒產生了興趣。 我們都知道。Volo.ABP 依賴註入容器使用了第三方組件Autofac實現的。有三種註入方式，構造函數註入和方法註入和屬性註入。 ABP的屬性註入原則參考如下： 這時候我就開始疑惑了，因為我知道 ...
  • C#TMS系統學習（ShippingNotice頁面）
    C#TMS系統代碼-業務頁面ShippingNotice學習 學一個業務頁面，ok，領導開完會就被裁掉了，很突然啊，他收拾東西的時候我還以為他要旅游提前請假了，還在尋思為什麼回家連自己買的幾箱飲料都要叫跑腿帶走，怕被偷嗎？還好我在他開會之前拿了兩瓶芬達 感覺感覺前面的BaseCity差不太多，這邊的 ...
  • C#動態查詢：巧用Expression組合多條件表達式
    概述：在C#中，通過`Expression`類、`AndAlso`和`OrElse`方法可組合兩個`Expression<Func<T, bool>>`，實現多條件動態查詢。通過創建表達式樹，可輕鬆構建複雜的查詢條件。 在C#中，可以使用AndAlso和OrElse方法組合兩個Expression< ...
  • 在Biwen.QuickApi中整合一個極簡的發佈訂閱(事件匯流排)
    閑來無聊在我的Biwen.QuickApi中實現一下極簡的事件匯流排,其實代碼還是蠻簡單的,對於初學者可能有些幫助 就貼出來,有什麼不足的地方也歡迎板磚交流~ 首先定義一個事件約定的空介面 public interface IEvent{} 然後定義事件訂閱者介面 public interface I ...
  • WPF 穩定的全屏化視窗方法
    1. 案例 成某三甲醫預約系統， 該項目在2024年初進行上線測試，在正常運行了兩天後，業務系統報錯：The connection pool has been exhausted, either raise MaxPoolSize (currently 800) or Timeout (curren ...
  • 在 WPF 中集成 ASP.NET Core 和 WebView2 用於集成 SPA 應用
    背景 我們有些工具在 Web 版中已經有了很好的實踐，而在 WPF 中重新開發也是一種費時費力的操作，那麼直接集成則是最省事省力的方法了。 思路解釋 為什麼要使用 WPF？莫問為什麼，老 C# 開發的堅持，另外因為 Windows 上已經裝了 Webview2/edge 整體打包比 electron ...
  • C#事件
    EDP是一套集組織架構，許可權框架【功能許可權，操作許可權，數據訪問許可權，WebApi許可權】，自動化日誌，動態Interface，WebApi管理等基礎功能於一體的，基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 發佈到 Win7+
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
所有分類