Latest:
技術分享教學

使用setTimeout() 加 innerHtml屬性制作時鐘

frank

<script language=”JavaScript”>
<!–
var now,hours,minutes,seconds,timeValue;
function showtime(){
now = new Date();
hours = now.getHours();
minutes = now.getMinutes();
seconds = now.getSeconds();
timeValue = (hours >= 12) ? “下午 ” : “上午 “;
timeValue += ((hours > 12) ? hours – 12 : hours) + ” 點”;
timeValue += ((minutes < 10) ? ” 0″ : ” “) + minutes + ” 分”;
timeValue += ((seconds < 10) ? ” 0″ : ” “) + seconds + ” 秒”;
clock.innerHTML = timeValue;
setTimeout(“showtime()”,1000);
}
showtime();
//–>
</script>
<body onload=”showtime();” >
<span id=’clock’></span>

  • <span id=’clock’></span>用來顯示時間的文字圖層。
  • var now, hours, minutes, seconds, timeValue，宣告變數
  • now=new Date()
    hours=now.getHours();，取得現在的時間，依次類推
  • clock.innerHTML=timeValue;利用InnerHtml屬性設定clock span tag中的內容
  • setTimeout(“showtime()”,1000)，setTimeout就是計時器，每隔1000毫秒會重新執行一次showtime();