码迷,mamicode.com
首页 > 其他好文 > 详细

简单定时器的制作。

时间:2016-04-24 00:51:42      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

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

定时器的作用

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

技术分享

简单定时器的制作。

标签:

原文地址:http://www.cnblogs.com/799875530qq/p/5426067.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!