在进行定时器的制作时，我想先把我们需要用到的一些东西介绍给大家。
定时器的作用
开启定时器
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>效果图：
时间： 2024-08-10 23:30:16