HTML+JS實現簡單的時鐘效果
阿新 • • 發佈：2019-01-28
前言:想要實現時鐘效果,關鍵就是要使用setTimeout()方法和clearTimeout()方法
首先搞清楚setTimeout()方法和clearTimeout()方法的用法:
- setTimeout()方法見名知意,就是設定時間跳出,用於在指定的毫秒數後呼叫函式或計算表示式,有兩個引數,第一個引數是要執行的函式或表示式,第二個引數是多少毫秒後執行,只會呼叫一次。針對時鐘效果,我們就可以在函式中遞迴呼叫本方法,每1秒執行一次
- setInterval()方法也可以實現相同效果,方法也是可按照指定的週期（以毫秒計）來呼叫函式或計算表示式,此處使用第一種
- clearTimeout()主要就是結束setTimeout()返回的物件,結束時間的改變.
下面具體實現:
1.HTML部分的程式碼
我們需要兩個按鈕分別來控制開始和結束,兩個按鈕需要實現點選實現來進行對應方法的呼叫,還需要一個顯示時間的標籤,此處使用<a>標籤
<body>
當前時間為:
<a id="time"></a><br />
<input type="button" onclick="startTime()" value="開始" />
<input type="button" onclick="endTime()" value="結束" />
</body>2.JS中編寫按鈕點選事件中的方法
startTime()方法中需要獲取當前時間,並解析後顯示出來
var t; function startTime() { var d = new Date(); //年月日 var year = d.getFullYear(); var mouth = d.getMonth() + 1; var day = d.getDate(); //時分秒 var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); if(s<10){ s = "0"+s; } document.getElementById("time").innerHTML = "<h1>" + year + "年" + mouth + "月" + day + "日 " + h + ":" + m + ":" + s + "</h1>"; t = setTimeout("startTime()", 1000); }
endTime()將setTimeout()方法返回的物件清除即可
function endTime() {
clearTimeout(t);
}此處即可實現簡單的時鐘效果