本文實例講述了JS實現HTML頁面中動態顯示當前時間。分享給大家供大家參考，具體如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net JS動態顯示時間</title>
<script>
var timer=null;
function displayClock(num){//num是傳入的startClock中的動態值
if(num<10){
return "0"+num;
}
else{
return num;
}
}
//停止計時
function stopClock(){
clearTimeout(timer);
}
//開始計時
function startClock(){
var time =new Date();
var hours=displayClock(time.getHours())+":";
var minutes=displayClock(time.getMinutes())+":";
var seconds=displayClock(time.getSeconds());
//顯示時間
show.innerHTML=hours+minutes+seconds;//在id為show的塊區域顯示
timer=setTimeout("startClock()",1000);//延時器
}
</script>
</head>
<style>
#show{
font-size: 24px;
color:#4213C9;
text-align:center;
}
</style>
<body onload="startClock()" onunload="stopClock()">
<div id="show"></div>
</body>
</html>
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun，測試運行效果如下：
PS：這里再為大家推薦幾款時間及日期相關工具供大家參考使用：
在線日期/天數計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期計算器/相差天數計算器：
http://tools.jb51.net/jisuanqi/datecalc
在線日期天數差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix時間戳(timestamp)轉換工具：
http://tools.jb51.net/code/unixtime
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
