javascript實(shí)現(xiàn)簡(jiǎn)易數(shù)碼時(shí)鐘

更新時(shí)間：2020年03月30日 09:29:35 作者：_acme_

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)易數(shù)碼時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)簡(jiǎn)易數(shù)碼時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下

通過(guò)這個(gè)小例子復(fù)習(xí)一下Date對(duì)象的基本使用.
還可以用Date對(duì)象做定時(shí)器，計(jì)時(shí)器等等.

效果如圖：

可以自己去找炫一點(diǎn)的圖片來(lái)代替文字,原理都是一樣,只是如果用圖片代替文字，則定時(shí)切換圖片即可.

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)建日期對(duì)象
 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(); //加載完頁(yè)面后立刻執(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時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專題

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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