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

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

這篇文章主要介紹了基于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>中來顯示
（2）定時(shí)器：每隔一秒再次訪問系統(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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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