溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
