你的位置:首页 > Java教程

[Java教程]简单定时器的制作。


 在进行定时器的制作时,我想先把我们需要用到的一些东西介绍给大家。

定时器的作用

  开启定时器
  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 >
<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>
效果图: