基于JavaScript實現(xiàn)數(shù)碼時鐘效果
更新時間：2020年03月30日 09:13:18 作者：zhaoke_930325
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)數(shù)碼時鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)數(shù)碼時鐘效果展示的具體代碼，供大家參考，具體內(nèi)容如下
- 通過建立toDBl函數(shù)將小于10的時間前面補(bǔ)上“0”使得時鐘正常運(yùn)行。
- 通過for循環(huán)將數(shù)組中的每一項都賦值給img元素相對應(yīng)的上面，str.charAt(i)通過i遞增將str的每個數(shù)字輸入到src中。
- 通過封裝函數(shù)tick，并調(diào)用了一次，使得網(wǎng)頁在刷新時不會出現(xiàn)圖片變化。
- 通過getHours，getMinutes，getSeconds來獲取當(dāng)前時間的數(shù)值。并將其通過toDbl函數(shù)+‘ '（一個空的字符串），將數(shù)字轉(zhuǎn)化為字符串，并將這些字符串添加到str中。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)碼時鐘2</title>
<style type="text/css">
*{
background-color: rgb(7,110,177);
vertical-align: middle;
}
#div1{
text-align: center;
width: 1300px;
height: 220px;
margin:0 auto;
}
span{
font-size: 50px;
color: white;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var aImg = document.getElementsByTagName('img');
function tick()
{
var oDate = new Date();
var str = toDbl(oDate.getHours())+toDbl(oDate.getMinutes())+toDbl(oDate.getSeconds());
for (var i = 0; i < aImg.length; i++) {
aImg[i].src='images/'+str.charAt(i)+'.jpg';
};
};
setInterval(tick,500);
tick();
};
function toDbl(n)
{
if (n<10) {
return '0'+n;
} else {
return ''+n;
}
};
</script>
</head>
<body>
<div id="div1">
<img src="images/1.jpg">
<img src="images/2.jpg">
<span>:</span>
<img src="images/3.jpg">
<img src="images/4.jpg">
<span>:</span>
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
</body>
</html>
更多JavaScript時鐘特效點擊查看：JavaScript時鐘特效專題
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript實現(xiàn)顯示和隱藏div方法匯總
本文章通過幾個簡單的實例告訴你如何來實例關(guān)于隱藏與顯示div層及關(guān)閉層與隱藏的區(qū)別分析哦，有需要的同學(xué)可以參考一下本文章。2015-08-08
JavaScript實現(xiàn)選項卡功能(面向過程與面向?qū)ο?
本文主要介紹了JavaScript實現(xiàn)選項卡功能(面向過程與面向?qū)ο?，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了JavaScript新窗口與子窗口之間的傳值,需要的朋友可以參考下2014-02-02
獲取文本信息的方法有很多，本例使用的使用的是jquery的text方法，并使用alert將文本彈出，下面是實現(xiàn)代碼2014-09-09
淺談js之字面量、對象字面量的訪問、關(guān)鍵字in的用法
下面小編就為大家?guī)硪黄獪\談js之字面量、對象字面量的訪問、關(guān)鍵字in的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
在javascript中涉及字符串大小寫轉(zhuǎn)換的方法有4個：toLowerCase()、toLocaleLowerCase()、toUpperCase()及toLocaleUpperCase()。今天我們主要來用下toUpperCase()和toLowerCase()方法。2015-05-05
這篇文章主要介紹了js判斷登錄與否并確定跳轉(zhuǎn)頁面的方法,涉及Ajax及session使用的技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄赼jax和jsonp的原生封裝(實例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
JavaScript請求后臺數(shù)據(jù)的常用方法匯總
這篇文章主要介紹了JavaScript請求后臺數(shù)據(jù)的幾種常用方式,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript前端如何實現(xiàn)截屏功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04