简单定时器的制作。

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

定时器的作用

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

简单定时器的制作。