菜鳥工程師肉豬: 使用JavaScript製作一個簡單時鐘

使用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的部分只是調整時鐘的樣式，例如顏色，文字，及外框的顏色或大小而已，就不多解釋了。

另外可參考圓形時鐘的做法。

菜鳥工程師肉豬

網頁

2017/8/22

使用JavaScript製作一個簡單時鐘

1 則留言: