使用JavaScript製作一個網頁上的簡單小時鐘
效果如下方右邊區塊的時鐘，來源是我的CodePen
See the Pen 簡單的時鐘 by 菜鳥工程師 (@bronx0807) on CodePen.
上面分層兩大區塊，左邊的區塊是程式碼，右邊的區塊是程式碼的結果。左邊的區塊又分層三部分，可使用上方的HTML，CSS及JS按鈕切換
製作方法
先寫一個html網頁程式碼如下。
<html>
<head>
</head>
<body onload="startTime()">
簡單的時鐘
<div id="clock"></div>
</body>
</html>注意到<body>標籤中有個onload的屬性，參數為startTime()，onload是一個網頁事件屬性，意思是當網頁載入完成後觸發，而被觸發後要執行的程序就是呼叫startTiem()這個JavaScript函式。
而<div id="clock">是用來呈現時鐘的區塊。
html完成後接著撰寫負責處理時鐘的運作JavaScript程式。網頁的JavaScript程式可以和html網頁寫在一起，也可以寫成一支獨立的js檔再匯入到html，本篇因為是支小小的程式，所以和html寫在一起。
JavaScript程式若要與html寫在一起，則JavaSript程式必須撰寫在<script> ... </script>標籤包夾的範圍內。
<html>
<head>
<script>
function startTime(){
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
mm = checkTime(mm);
ss = checkTime(ss);
document.getElementById('clock').innerHTML = hh + ":" + mm + ":" + ss;
var timeoutId = setTimeout(startTime, 500);
}
function checkTime(i){
if(i < 10) {
i = "0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
簡單的時鐘
<div id="clock"></div>
</body>
</html>startTime()函式在html載入完成後觸發onload事件被執行，用來取得目前的日期。而checkTime()函式則處理當日期或月份為個位數時，例如0~9，前面要補一個零。在startTime()中被呼叫。
document.getElementById('clock')用來取得<div id="clock">，取得後再呼叫innerHTML()把取得的時分秒設在<div id="clock"> ... </div>
然後每間隔500毫秒就會重新呼叫setTimeout()來重新執行startTime()取得目前日期。
至於CSS的部分只是調整時鐘的樣式，例如顏色，文字，及外框的顏色或大小而已，就不多解釋了。
另外可參考圓形時鐘的做法。
1 則留言:
我的簡單的時鐘完成了，因為菜只能多練，不想複製貼上，多謝你的分享。
張貼留言