[Web 程式設計]JavaScript - 倒數計時器

今天練習了第一個 JavaScript 程式，希望做一個能動態更新網頁， 馬上想到一個還不錯的題目，就是寫一個國防役結束倒數計時器。此程式需要抓系統時間與計算時間差，很容易的在 date 找到我要的功能，另外我需要讓網頁不斷的更新，因此又找到一個 timer 的範例，於是我完成了這個 JavaScript 的小程式：



<script type="text/javascript">
// variables for counting
var target = new Date(2011, 0, 23);
var oneSecond = 1000;
var oneMin = oneSecond * 60;
var oneHour = oneMin * 60;
var oneDay = oneHour * 24;

function timedCount()
{
  var today=new Date();
  var diff=target.getTime() - today.getTime(); // countdown
  var numDay = Math.floor(diff / oneDay);

  diff = diff - numDay * oneDay;
  var numHour = Math.floor(diff / oneHour);
  diff -= numHour * oneHour;
  var numMin = Math.floor(diff / oneMin);
  diff -= numMin * oneMin;
  var numSec = Math.ceil(diff / oneSecond);

  var output= document.getElementById("output");
  output.firstChild.nodeValue = "The Freedom Clock: "   numDay   " days "   numHour   " hours "   numMin   " minutes "   numSec   " seconds.";

  setTimeout("timedCount()",1000);
}
</script>


<h2 id="output"> </h2>
<script type="text/javascript">
timedCount()
</script>

接著將它掛到 Google 小工具後，就可以在我的部落格上看到結果了。不過整個過程中，反倒是找方法將 JavaScript 的程式貼到部落格上比較困難，花了我許多時間...。