基于JavaScript實現(xiàn)數(shù)碼時鐘效果
更新時間:2020年03月30日 09:13:18 作者:zhaoke_930325
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)數(shù)碼時鐘效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)數(shù)碼時鐘效果展示的具體代碼,供大家參考,具體內(nèi)容如下
- 通過建立toDBl函數(shù)將小于10的時間前面補上“0”使得時鐘正常運行。
- 通過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來獲取當前時間的數(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 dom操作之cloneNode文本節(jié)點克隆使用技巧
文本克隆函數(shù)cloneNode他有兩個參數(shù)——true or false2009-12-12
Bootstrap每天必學(xué)之模態(tài)框(Modal)插件
Bootstrap每天必學(xué)之模態(tài)框(Modal)插件,模態(tài)框(Modal)是覆蓋在父窗體上的子窗體。通常,目的是顯示來自一個單獨的源的內(nèi)容,可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等,感興趣的小伙伴們可以參考一下2016-04-04
javascript實現(xiàn)檢驗的各種規(guī)則
這篇文章主要介紹了javascript實現(xiàn)檢驗的各種規(guī)則,涉及javascript針對手機號、郵箱、網(wǎng)址、漢字及圖片等相關(guān)檢測技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
ajax如何實現(xiàn)頁面局部跳轉(zhuǎn)與結(jié)果返回
AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù),通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實現(xiàn)異步更新,本篇文章給大家介紹ajax如何實現(xiàn)頁面局部跳轉(zhuǎn)與結(jié)果返回,感興趣的朋友一起來學(xué)習(xí)2015-08-08
在layui框架中select下拉框監(jiān)聽更改事件的例子
今天小編就為大家分享一篇在layui框架中select下拉框監(jiān)聽更改事件的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09

