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

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

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

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

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

效果圖：

具體代碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</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ù)，則前面補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程序設計有所幫助。

您可能感興趣的文章:

隨鼠標移動的時鐘非常漂亮遺憾的是只支持IE
這篇文章主要介紹了隨鼠標移動的時鐘非常漂亮遺憾的是只支持IE,需要的朋友可以參考下
2014-08-08
淺析2種JavaScript繼承方式
這篇文章主要介紹了2種JavaScript主要繼承方式，一種是通過原型的方式，一種是通過借用call&apply的構(gòu)造函數(shù)方式，感興趣的小伙伴們可以參考一下
2015-12-12
Javascript中常用類型的格式化方法小結(jié)
這篇文章主要給大家介紹了Javascript中常用類型的格式化方法，其中包括格式化浮點數(shù)、格式化有符號整數(shù)(int32)、格式化無符號整數(shù)(uint32)、格式化布爾值以及格式化字符串等，文中給出了詳細的示例代碼，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-12-12
詳解從0開始搭建微信小程序(前后端)的全過程
這篇文章主要介紹了詳解從0開始搭建微信小程序(前后端)的全過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
js獲取css的各種樣式并且設置他們的方法
下面小編就為大家?guī)硪黄猨s獲取css的各種樣式并且設置他們的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
微信小程序換膚功能實現(xiàn)代碼(思路詳解)
這篇文章主要介紹了微信小程序換膚功能實現(xiàn)代碼，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-08-08
JS簡單實現(xiàn)仿百度控制臺輸出信息效果
這篇文章主要介紹了JS簡單實現(xiàn)仿百度控制臺輸出信息效果,涉及javascript中console.log函數(shù)的簡單使用技巧,需要的朋友可以參考下
2016-09-09
TypeScript開發(fā)中規(guī)范編碼來提高代碼的可讀性
在TypeScript中,我們通過使用類型別名reference指令、類型守衛(wèi)、泛型、接口、類型別名等來提高代碼的可維護性以及可讀性,這篇文章主要介紹了TypeScript開發(fā)中規(guī)范編碼來提高代碼的可讀性,需要的朋友可以參考下
2023-12-12
javaScript實現(xiàn)鼠標在文字上懸浮時彈出懸浮層效果
這篇文章主要為大家詳細介紹了javaScript實現(xiàn)鼠標在文字上懸浮時彈出懸浮層效果的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-03-03
js如何改變文章的字體大小
這篇文章主要介紹了js改變文章字體大小的方法，大家在使用word文檔時工具欄為大家提供更改字體大小的選項，那js是如何改變文章字體大小，下文為大家揭曉，需要的朋友可以參考下
2016-01-01