<!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></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/> /*封裝好的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>