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