網頁

2017/8/22

使用JavaScript製作一個簡單時鐘

使用JavaScript製作一個網頁上的簡單小時鐘

效果如下方右邊區塊的時鐘,來源是我的CodePen

See the Pen 簡單的時鐘 by 菜鳥工程師 (@bronx0807) on CodePen.

上面分層兩大區塊,左邊的區塊是程式碼,右邊的區塊是程式碼的結果。左邊的區塊又分層三部分,可使用上方的HTMLCSSJS按鈕切換

製作方法

先寫一個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 則留言:

  1. 我的簡單的時鐘完成了,因為菜只能多練,不想複製貼上,多謝你的分享。

    回覆刪除