本文實例講述了JS實現簡易換圖時鐘功能。分享給大家供大家參考，具體如下：
<!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 這張圖是數字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); //時間函數 每1000毫秒執行以下moo()這個函數 也就是每一秒執行以下moo()這個函數 moo(); //當我們寫完之后會發現系統不會直接執行函數 會有一個一秒的延遲 因此我們只需在瀏覽器打開的時候先執行以下這個函數 就可以消除這個一秒的延遲 function moo(){ var now=new Date(); var iHours=now.getHours(); var iMinutes=now.getMinutes(); var iSecends=now.getSeconds(); //分別獲取時間 小時 分鐘以及秒數 function mov(j){ //因為我們是六張圖 因此當我們時間小于10的時候 我們的iHours iMinutes iSecends為個位數 就不滿足我們的六張圖 因為我們需要 if(j<10){ 考慮用0來補足 例如 17點5分5秒 我們需要寫成17:05:05 而不是17:5:5 return "0"+j; 因此我們用mov(j)這個函數來判斷一下 當我們的iHours iMinutes iSecends為個位數時 我們為其補0 就是"0"+j }else{ return j; } } var str=mov(iHours)+mov(iMinutes)+mov(iSecends); //那么這里我們只需要等量代換 把j這個參數換成iHours iMinutes iSecends就可以了 我們賦值給str 因此str將會輸出 一個六位數 例如現在是早晨9點51分27秒 那么str=095127 這么一個六位數 for(var i=0;i<=5;i++){ //接下來我們用一個for循環換圖就可以了 因為我們是六張圖 因此i<=5即可 如果圖數比較多 可以寫成i<=iImg.length-1 iImg[i].src="img/"+str[i]+".jpg"; // 這句話的含義就是換圖 舉個例子 iImg[1]代表的就是第二張圖 str[1]就是上面str里面的第二個數字 就是9 } 因此iImg[1].src=img/9.jpg 這樣第二張圖就換成了9這個圖片 換圖就完成了 因此一個時鐘就做成了 }</script>更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
