基于javascript實現(xiàn)動態(tài)顯示當(dāng)前系統(tǒng)時間

更新時間：2016年01月28日 09:36:26 作者：gyz418

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

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

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

效果圖：

具體代碼：

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


//定義函數(shù)：構(gòu)建要顯示的時間日期字符串
function showTime()
{
 //創(chuàng)建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();
 //如果是單個數(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的對象
 var obj = document.getElementById("result");
 //將str的內(nèi)容寫入到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程序設(shè)計有所幫助。

您可能感興趣的文章: