快捷導(dǎo)航

基于JavaScript實(shí)現(xiàn)數(shù)碼時(shí)鐘效果

更新時(shí)間：2020年03月30日 09:13:18 作者：zhaoke_930325

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

本文實(shí)例為大家分享了js實(shí)現(xiàn)數(shù)碼時(shí)鐘效果展示的具體代碼，供大家參考，具體內(nèi)容如下

通過(guò)建立toDBl函數(shù)將小于10的時(shí)間前面補(bǔ)上“0”使得時(shí)鐘正常運(yùn)行。
通過(guò)for循環(huán)將數(shù)組中的每一項(xiàng)都賦值給img元素相對(duì)應(yīng)的上面，str.charAt(i)通過(guò)i遞增將str的每個(gè)數(shù)字輸入到src中。
通過(guò)封裝函數(shù)tick，并調(diào)用了一次，使得網(wǎng)頁(yè)在刷新時(shí)不會(huì)出現(xiàn)圖片變化。
通過(guò)getHours，getMinutes，getSeconds來(lái)獲取當(dāng)前時(shí)間的數(shù)值。并將其通過(guò)toDbl函數(shù)+‘ '（一個(gè)空的字符串），將數(shù)字轉(zhuǎn)化為字符串，并將這些字符串添加到str中。

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>數(shù)碼時(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時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專題

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

您可能感興趣的文章:

相關(guān)文章

小程序?qū)崿F(xiàn)Token生成與驗(yàn)證
本文主要介紹了小程序?qū)崿F(xiàn)Token生成與驗(yàn)證，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
利用d3.js力導(dǎo)布局繪制資源拓?fù)鋱D實(shí)例教程
這篇文章主要給大家介紹了關(guān)于如何利用d3.js力導(dǎo)布局繪制資源拓?fù)鋱D的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-01-01
JS無(wú)限級(jí)導(dǎo)航菜單實(shí)現(xiàn)方法
今天小編就為大家分享一篇關(guān)于JS無(wú)限級(jí)導(dǎo)航菜單實(shí)現(xiàn)方法，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-01-01
利用a標(biāo)簽自動(dòng)解析URL分析網(wǎng)址實(shí)例
a標(biāo)簽也和window.location一樣，也有這樣屬性，因此可以利用它來(lái)分析網(wǎng)址，下面的實(shí)例代碼，大家可以看看
2014-10-10
javascript dom操作之cloneNode文本節(jié)點(diǎn)克隆使用技巧
文本克隆函數(shù)cloneNode他有兩個(gè)參數(shù)——true or false
2009-12-12
Bootstrap每天必學(xué)之模態(tài)框（Modal）插件
Bootstrap每天必學(xué)之模態(tài)框（Modal）插件,模態(tài)框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來(lái)自一個(gè)單獨(dú)的源的內(nèi)容，可以在不離開(kāi)父窗體的情況下有一些互動(dòng)。子窗體可提供信息、交互等,感興趣的小伙伴們可以參考一下
2016-04-04
JavaScript sort排序的使用方法詳解
這篇文章主要介紹了JavaScript sort排序的使用方法,sort方法用于對(duì)數(shù)組的元素進(jìn)行排序,排序順序可以是字母或數(shù)字,并按升序或降序,默認(rèn)排序順序?yàn)榘醋帜干?需要的朋友可以參考下
2024-10-10
javascript實(shí)現(xiàn)檢驗(yàn)的各種規(guī)則
這篇文章主要介紹了javascript實(shí)現(xiàn)檢驗(yàn)的各種規(guī)則,涉及javascript針對(duì)手機(jī)號(hào)、郵箱、網(wǎng)址、漢字及圖片等相關(guān)檢測(cè)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
ajax如何實(shí)現(xiàn)頁(yè)面局部跳轉(zhuǎn)與結(jié)果返回
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新，本篇文章給大家介紹ajax如何實(shí)現(xiàn)頁(yè)面局部跳轉(zhuǎn)與結(jié)果返回，感興趣的朋友一起來(lái)學(xué)習(xí)
2015-08-08
在layui框架中select下拉框監(jiān)聽(tīng)更改事件的例子
今天小編就為大家分享一篇在layui框架中select下拉框監(jiān)聽(tīng)更改事件的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09