在進行定時器的製作時，我想先把我們需要用到的一些東西介紹給大家。 定時器的作用 開啟定時器 setInterval 間隔型 setTimeout 延遲型 停止定時器 clearInterval clearTimeout 數位時鐘思路效果 獲取系統時間： date對象 getHours getMinu ...
在進行定時器的製作時，我想先把我們需要用到的一些東西介紹給大家。
定時器的作用
開啟定時器
setInterval 間隔型
setTimeout 延遲型
停止定時器
clearInterval
clearTimeout
數位時鐘
思路效果
獲取系統時間：
date對象
getHours getMinutes getSeconds
顯示系統時間
字元串連接
空位補零
設置圖片路徑
charAt方法
操作前，我們需要用PS裁剪出0—9的數字圖片來，以便讓我們看到直觀美化的效果。
下麵是我的代碼部分和效果圖
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>時鐘</title>
<script>
function zhuanhua(n)
{
if(n<10)
{
return "0"+n; /*讓獲取到的系統時間數字型改變為字元串並保證是兩位數 */
}
else
{
return ""+n;
}
}
window.onload= function a() {
var oimg=document.getElementsByTagName("img");
var odate=new Date();
var shuju=zhuanhua(odate.getHours())+zhuanhua(odate.getMinutes())+zhuanhua(odate.getSeconds());
/*獲取系統時間值以及進行函數操作*/
for(var i=0;i<oimg.length;i++)
{
oimg[i].src=shuju [i]+".png";
}
/*進行圖片替換*/
setInterval(a,1000)
/*每1000毫秒進行一次頁面刷新*/
};
</script>
</head>
<body>
<div style="font-size: 50px">
<img src="0.png"/>
<img src="0.png"/>：
<img src="0.png"/>
<img src="0.png"/>：
<img src="0.png"/>
<img src="0.png"/>
</div>
</body>
</html>
效果圖：
