這篇文章主要介紹了基于javascript實(shí)現(xiàn)動(dòng)態(tài)顯示當(dāng)前系統(tǒng)時(shí)間，以一個(gè)完整實(shí)例形式較為詳細(xì)的分析了js動(dòng)態(tài)顯示當(dāng)前系統(tǒng)時(shí)間的實(shí)現(xiàn)技巧，需要的朋友可以參考下

本文實(shí)例講解了javascript實(shí)現(xiàn)動(dòng)態(tài)顯示當(dāng)前系統(tǒng)時(shí)間的詳細(xì)代碼，具體內(nèi)容如下

（1）時(shí)間日期信息，應(yīng)該在一個(gè)<div>中來(lái)顯示
（2）定時(shí)器：每隔一秒再次訪問(wèn)系統(tǒng)時(shí)間，window對(duì)象的setTimeout()
（3）時(shí)鐘顯示的時(shí)機(jī)(事件)：當(dāng)網(wǎng)頁(yè)加載完成后才顯示，事件onload
（4）如何將時(shí)間日期信息寫入到指定的<div>中，DOM對(duì)象中的innerHTML屬性

效果圖：

具體代碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript">


//定義函數(shù)：構(gòu)建要顯示的時(shí)間日期字符串
function showTime()
{
 //創(chuàng)建Date對(duì)象
 var today = new Date();
 //分別取出年、月、日、時(shí)、分、秒
 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();
 //如果是單個(gè)數(shù)，則前面補(bǔ)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;
 
 //構(gòu)建要輸出的字符串
 var str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
 
 //獲取id=result的對(duì)象
 var obj = document.getElementById("result");
 //將str的內(nèi)容寫入到id=result的<div>中去
 obj.innerHTML = str;
 //延時(shí)器
 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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: