DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 基於javascript實現動態顯示當前系統時間
基於javascript實現動態顯示當前系統時間
編輯:關於JavaScript     

本文實例講解了javascript實現動態顯示當前系統時間的詳細代碼,具體內容如下

  • (1)時間日期信息,應該在一個<div>中來顯示
  • (2)定時器:每隔一秒再次訪問系統時間,window對象的setTimeout()
  • (3)時鐘顯示的時機(事件):當網頁加載完成後才顯示,事件onload
  • (4)如何將 時間日期信息 寫入到指定的<div>中,DOM對象中的innerHTML屬性

效果圖:

具體代碼:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript">


//定義函數:構建要顯示的時間日期字符串
function showTime()
{
 //創建Date對象
 var today = new Date();
 //分別取出年、月、日、時、分、秒
 var year = today.getFullYear();
 var month = today.getMonth()+1;
 var day = today.getDate();
 var hours = today.getHours();
 var minutes = today.getMinutes();
 var seconds = today.getSeconds();
 //如果是單個數,則前面補0
 month  = month<10  ? "0"+month : month;
 day  = day <10  ? "0"+day : day;
 hours  = hours<10  ? "0"+hours : hours;
 minutes = minutes<10 ? "0"+minutes : minutes;
 seconds = seconds<10 ? "0"+seconds : seconds;
 
 //構建要輸出的字符串
 var str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
 
 //獲取id=result的對象
 var obj = document.getElementById("result");
 //將str的內容寫入到id=result的<div>中去
 obj.innerHTML = str;
 //延時器
 window.setTimeout("showTime()",1000);
}
</script>
<style type="text/css">
#result{
 width:500px;
 border:1px solid #CCCCCC;
 background:#FFFFCC;
 margin:50px auto;
 font-size:24px;
 color:#FF0000;
 padding:20px;
}
</style>
</head>

<body onload="showTime()">
<div id="result"></div>
</body>
</html>

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved