JS實現(xiàn)簡易換圖時鐘功能分析

更新時間：2018年01月04日 10:35:03 作者：小五Aaron

這篇文章主要介紹了JS實現(xiàn)簡易換圖時鐘功能,結(jié)合實例形式分析了javascript結(jié)合時間函數(shù)定時變換顯示圖片實現(xiàn)時鐘功能的相關操作技巧,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)簡易換圖時鐘功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> /*寫移動端需要加上這句代碼*/
 <title>JS簡易時鐘</title>
 <link rel="stylesheet" type="text/css" href="css/reset.css" rel="external nofollow" /> /*封裝好的css 對一些基本的進行了設置*/
 <style type="text/css">
  #dad{width: 12rem;height: 10rem;margin: 20rem auto;}/*移動端的單位rem*/
  img{float: left;}
 </style>
 </head>
 <body>
 <div id="onclick">
  <img src="img/0.jpg"/> <!--首先我們的時鐘是有六張圖組成 例如 17:53:52 因此我們需要放六張圖進去 接下來我們需要用到js做的就是換圖而已
  <img src="img/0.jpg"/> img/0.jpg 這張圖是數(shù)字0的圖 此時我們的img目錄下應該是0-9這十張圖 -->
  <img src="img/0.jpg"/>
  <img src="img/0.jpg"/>
  <img src="img/0.jpg"/>
  <img src="img/0.jpg"/>
 </div>
 </body>
</html>
<script type="text/javascript">
 var iImg=document.getElementsByTagName("img"); //首先我們先獲取到img這個標簽
 setInterval(moo,1000); //時間函數(shù) 每1000毫秒執(zhí)行以下moo()這個函數(shù) 也就是每一秒執(zhí)行以下moo()這個函數(shù)
 moo(); //當我們寫完之后會發(fā)現(xiàn)系統(tǒng)不會直接執(zhí)行函數(shù) 會有一個一秒的延遲 因此我們只需在瀏覽器打開的時候先執(zhí)行以下這個函數(shù) 就可以消除這個一秒的延遲
 function moo(){
 var now=new Date();
 var iHours=now.getHours();
 var iMinutes=now.getMinutes();
 var iSecends=now.getSeconds(); //分別獲取時間 小時 分鐘以及秒數(shù)
 function mov(j){ //因為我們是六張圖 因此當我們時間小于10的時候 我們的iHours iMinutes iSecends為個位數(shù) 就不滿足我們的六張圖 因為我們需要
  if(j<10){ 考慮用0來補足 例如 17點5分5秒 我們需要寫成17:05:05 而不是17:5:5
  return "0"+j; 因此我們用mov(j)這個函數(shù)來判斷一下 當我們的iHours iMinutes iSecends為個位數(shù)時 我們?yōu)槠溲a0 就是"0"+j
  }else{
  return j;
  }
 }
 var str=mov(iHours)+mov(iMinutes)+mov(iSecends); //那么這里我們只需要等量代換 把j這個參數(shù)換成iHours iMinutes iSecends就可以了 我們賦值給str 因此str將會輸出
 一個六位數(shù) 例如現(xiàn)在是早晨9點51分27秒 那么str=095127 這么一個六位數(shù)
　for(var i=0;i<=5;i++){ //接下來我們用一個for循環(huán)換圖就可以了 因為我們是六張圖 因此i<=5即可 如果圖數(shù)比較多 可以寫成i<=iImg.length-1
  iImg[i].src="img/"+str[i]+".jpg"; // 這句話的含義就是換圖 舉個例子 iImg[1]代表的就是第二張圖 str[1]就是上面str里面的第二個數(shù)字 就是9
 } 因此iImg[1].src=img/9.jpg 這樣第二張圖就換成了9這個圖片 換圖就完成了 因此一個時鐘就做成了
 }
</script>

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: