javascript實現(xiàn)簡易數(shù)碼時鐘
更新時間：2020年03月30日 09:29:35 作者：_acme_
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)簡易數(shù)碼時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現(xiàn)簡易數(shù)碼時鐘的具體代碼，供大家參考，具體內(nèi)容如下
通過這個小例子復(fù)習(xí)一下Date對象的基本使用.
還可以用Date對象做定時器，計時器等等.
效果如圖：
可以自己去找炫一點的圖片來代替文字,原理都是一樣,只是如果用圖片代替文字，則定時切換圖片即可.
HTML代碼：
<div id="clock"> <p></p> <p></p> <p></p> </div>
CSS代碼:
*{margin:0;padding:0;}
#clock{width:300px;height:150px;position: relative;margin:50px auto;background: #eeeeee;cursor: default;}
#clock p{margin-top:5px;width:300px;height: 40px;text-align: center;
font:italic bold 36px/40px arial,sans-serif;letter-spacing: 3px;color:blueviolet;}
JS代碼：
window.onload = function ()
{
var oDiv = document.getElementById('clock');
var aP = oDiv.getElementsByTagName('p');
setInterval(clock,1000);
function clock()
{
var oDate = new Date(); //創(chuàng)建日期對象
var date = oDate.getFullYear()+'-'+ convert(oDate.getMonth()+1) +'-'+ convert(oDate.getDate());
var time = convert(oDate.getHours()) +':'+convert(oDate.getMinutes()) + ':' +convert(oDate.getSeconds());
aP[0].innerHTML = date;
aP[1].innerHTML = time;
aP[2].innerHTML = '星期' + convertWeek(oDate.getDay());
}
clock(); //加載完頁面后立刻執(zhí)行一次,不用等1秒后才顯示
};
//把一位數(shù)字轉(zhuǎn)換為兩位字符串，補(bǔ)0
function convert(num)
{
return num < 9?'0'+num:''+num;
}
//把week轉(zhuǎn)換為中文
function convertWeek(num)
{
return num==0?'日':num==1?'一':num==2?'二':num==3?'三':num==4?'四':num==5?'五':'六';
}
更多JavaScript時鐘特效點擊查看：JavaScript時鐘特效專題
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS向上取整、向下取整、四舍五入、取絕對值、取較大較小值及隨機(jī)數(shù)代碼示例
在Js中對數(shù)值進(jìn)行操作的場景有,向上取整、向下取整、四舍五入、固定精度、固定長度、取整,這篇文章主要給大家介紹了關(guān)于JS向上取整、向下取整、四舍五入、取絕對值、取較大較小值及隨機(jī)數(shù)的相關(guān)資料,需要的朋友可以參考下2024-04-04
編寫JS的過程中,我們經(jīng)常用到對象,也會用到對象中的屬性,下面這篇文章主要給大家介紹了關(guān)于JS判斷對象屬性是否存在的五種方案,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
這篇文章主要介紹了基于JS實現(xiàn)頁面懸浮框的實例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
這篇文章主要介紹了谷歌地圖打不開的解決辦法,本文給出了一個可以正常使用的谷歌地圖調(diào)用案例,需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細(xì)介紹了js定時器實現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
JavaScript實現(xiàn)簡易的天數(shù)計算器實例【附demo源碼下載】
這篇文章主要介紹了JavaScript實現(xiàn)簡易的天數(shù)計算器,結(jié)合實例形式分析了javascript日期與時間計算的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-01-01
JS可以實現(xiàn)很多java代碼不易完成的功能,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你學(xué)會JavaScript計時事件的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了JS分頁的實現(xiàn)（同步與異步）,需要的朋友可以參考下2017-09-09
這篇文章主要為大家介紹了如何使用splitChunks精細(xì)控制代碼分割來實現(xiàn)降低包大小的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
chrome瀏覽器不僅僅可以用來上網(wǎng)，對于開發(fā)人員來說，它更像是一款強(qiáng)大的開發(fā)輔助工具。今天這篇文章給大家分享在chrome瀏覽器如何斷點調(diào)試異步加載的JS，有需要的可以參考借鑒。2016-09-09