使用JavaScript定時器顯示時間并停止

在前端開發中，使用JavaScript可以實現許多有趣的功能，其中定時器是一個常見的應用場景。通過定時器，我們可以實現定時更新頁面數據，顯示動態內容等。本文將介紹如何使用JavaScript定時器顯示

在前端開發中，使用JavaScript可以實現許多有趣的功能，其中定時器是一個常見的應用場景。通過定時器，我們可以實現定時更新頁面數據，顯示動態內容等。本文將介紹如何使用JavaScript定時器顯示時間并實現停止功能。

打開HBuilderX工具，新建頁面文件

首先，打開HBuilderX工具，新建一個HTML頁面文件。然后，在body元素中插入一個輸入框，用于顯示當前時間。

添加JavaScript代碼

接下來，在頁面中添加script標簽，并定義全局變量time和函數showTime。showTime函數用于獲取當前時間，并將其賦值給輸入框，以實現顯示當前時間的功能。

保存并查看效果

保存代碼并在瀏覽器中打開頁面，但是可能會發現輸入框并未顯示當前時間。這是因為我們還沒有啟動定時器來更新時間。

使用setInterval方法創建定時器

為了實現定時更新時間的功能，我們可以使用setInterval()方法。將showTime函數作為參數傳遞給setInterval()，并設置間隔時間為1000ms（即1秒）。

刷新頁面查看效果

再次保存代碼并刷新瀏覽器頁面，你將會看到輸入框中顯示著當前的實時時間。定時器每隔1秒就會更新一次時間，讓頁面上的時間保持最新狀態。

停止定時器

如果想要停止定時器，可以將setInterval()的返回值賦給一個變量，然后在點擊事件中調用clearInterval(m)來清除定時器。添加一個按鈕，并為其綁定點擊事件，點擊按鈕即可停止定時器。

通過以上步驟，你已經學會了如何使用JavaScript定時器顯示時間并實現停止功能。定時器在前端開發中有著廣泛的運用，希望本文能對你有所幫助。