快捷導(dǎo)航

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

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

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

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

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

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: