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)文章
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)頁面頂部選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了使用TS來編寫express服務(wù)器的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
JS實現(xiàn)點擊文字對應(yīng)DIV層不停閃動效果的方法
這篇文章主要介紹了JS實現(xiàn)點擊文字對應(yīng)DIV層不停閃動效果的方法,實例分析了javascript操作div層的效果,非常實用,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了微信小程序云開發(fā)之云函數(shù)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
本篇文章主要介紹了詳解webpack4升級指南以及從webpack3.x遷移，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了詳解Howler.js Web音頻播放終極解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
javascript實現(xiàn)無限級select聯(lián)動菜單
這篇文章主要介紹了javascript實現(xiàn)無限聯(lián)動菜單的方法和示例，思路非常棒,需要的朋友可以參考下2015-01-01
在JavaScript中,將年月日轉(zhuǎn)換為時間戳可以通過多種方式實現(xiàn),下面給大家分享JS把年月日轉(zhuǎn)為時間戳的操作方法,感興趣的朋友跟隨小編一起看看吧2024-08-08
聲明一個數(shù)值類型的變量我看到三種;我嘴角微微一笑：少年你還嫩了點，哪止三種，我知道的至少有五種,好奇的你可以參考下哈，希望本文可以幫助到你2013-02-02
Javascript中Null和undefined的簡單理解
在JavaScript中存在這樣兩種原始類型:Null與Undefined,這兩種類型常常會使JavaScript的開發(fā)人員產(chǎn)生疑惑,在什么時候是Null,什么時候又是Undefined,下面這篇文章主要給大家介紹了關(guān)于Javascript中Null和undefined的相關(guān)資料,需要的朋友可以參考下2022-04-04