javascript實(shí)現(xiàn)簡易數(shù)碼時鐘
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)簡易數(shù)碼時鐘的具體代碼,供大家參考,具體內(nèi)容如下
通過這個小例子復(fù)習(xí)一下Date對象的基本使用.
還可以用Date對象做定時器,計(jì)時器等等.
效果如圖:
可以自己去找炫一點(diǎn)的圖片來代替文字,原理都是一樣,只是如果用圖片代替文字,則定時切換圖片即可.
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時鐘特效點(diǎn)擊查看: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實(shí)現(xiàn)頁面懸浮框的實(shí)例代碼
這篇文章主要介紹了基于JS實(shí)現(xiàn)頁面懸浮框的實(shí)例代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12JavaScript實(shí)現(xiàn)簡易的天數(shù)計(jì)算器實(shí)例【附demo源碼下載】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡易的天數(shù)計(jì)算器,結(jié)合實(shí)例形式分析了javascript日期與時間計(jì)算的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-01-01一篇文章帶你學(xué)會JavaScript計(jì)時事件
JS可以實(shí)現(xiàn)很多java代碼不易完成的功能,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你學(xué)會JavaScript計(jì)時事件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11chrome瀏覽器如何斷點(diǎn)調(diào)試異步加載的JS
chrome瀏覽器不僅僅可以用來上網(wǎng),對于開發(fā)人員來說,它更像是一款強(qiáng)大的開發(fā)輔助工具。今天這篇文章給大家分享在chrome瀏覽器如何斷點(diǎn)調(diào)試異步加載的JS,有需要的可以參考借鑒。2016-09-09