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

發(fā)布時(shí)間：2020-08-19 19:17:38 來源：腳本之家閱讀：160 作者：zhaoke_930325 欄目：web開發(fā)

本文實(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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽