快捷導(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)容如下

通過建立toDBl函數(shù)將小于10的時(shí)間前面補(bǔ)上“0”使得時(shí)鐘正常運(yùn)行。
通過for循環(huán)將數(shù)組中的每一項(xiàng)都賦值給img元素相對應(yīng)的上面，str.charAt(i)通過i遞增將str的每個(gè)數(shù)字輸入到src中。
通過封裝函數(shù)tick，并調(diào)用了一次，使得網(wǎng)頁在刷新時(shí)不會出現(xiàn)圖片變化。
通過getHours，getMinutes，getSeconds來獲取當(dāng)前時(shí)間的數(shù)值。并將其通過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í)鐘特效專題

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

您可能感興趣的文章:

相關(guān)文章

javascript實(shí)現(xiàn)顯示和隱藏div方法匯總
本文章通過幾個(gè)簡單的實(shí)例告訴你如何來實(shí)例關(guān)于隱藏與顯示div層及關(guān)閉層與隱藏的區(qū)別分析哦，有需要的同學(xué)可以參考一下本文章。
2015-08-08
JavaScript實(shí)現(xiàn)選項(xiàng)卡功能(面向過程與面向?qū)ο?
本文主要介紹了JavaScript實(shí)現(xiàn)選項(xiàng)卡功能(面向過程與面向?qū)ο?，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
JavaScript新窗口與子窗口傳值詳解
這篇文章主要介紹了JavaScript新窗口與子窗口之間的傳值,需要的朋友可以參考下
2014-02-02
使用text方法獲取Html元素文本信息示例
獲取文本信息的方法有很多，本例使用的使用的是jquery的text方法，并使用alert將文本彈出，下面是實(shí)現(xiàn)代碼
2014-09-09
淺談js之字面量、對象字面量的訪問、關(guān)鍵字in的用法
下面小編就為大家?guī)硪黄獪\談js之字面量、對象字面量的訪問、關(guān)鍵字in的用法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
JavaScript更改字符串的大小寫
在javascript中涉及字符串大小寫轉(zhuǎn)換的方法有4個(gè)：toLowerCase()、toLocaleLowerCase()、toUpperCase()及toLocaleUpperCase()。今天我們主要來用下toUpperCase()和toLowerCase()方法。
2015-05-05
js判斷登錄與否并確定跳轉(zhuǎn)頁面的方法
這篇文章主要介紹了js判斷登錄與否并確定跳轉(zhuǎn)頁面的方法,涉及Ajax及session使用的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-01-01
基于ajax和jsonp的原生封裝(實(shí)例)
下面小編就為大家?guī)硪黄赼jax和jsonp的原生封裝(實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
JavaScript請求后臺數(shù)據(jù)的常用方法匯總
這篇文章主要介紹了JavaScript請求后臺數(shù)據(jù)的幾種常用方式,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
詳解JavaScript前端如何實(shí)現(xiàn)截屏功能
這篇文章主要為大家詳細(xì)介紹了JavaScript前端如何實(shí)現(xiàn)截屏功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04