白驹过隙，时光匆匆，这已经是我来到千锋郑州HTML5培训班的第六周了，随着学习的深入，我了解了网页制作的基本方法，也做了一些简单的项目，接下来就给大家分享一下数码时钟的制作方法。

　　在做项目之前，我们一定要明确自己的逻辑思路：设置一个定时器，使定时器中的函数获取当前时间，然后每秒刷新一次这个函数，刷新时，更换代表时间的数字图片，以达到制作一个跟现实时间一样，并且会随着时间变化而变化的电子时钟。

　　思路理清后开始操作：

　　首先设置一个DIV并且插入六张图片表示时间：

<div id="box">
              <img src="img/0.png" id="img1" />
              <img src="img/0.png" id="img2" />时
              <img src="img/0.png" id="img3" />
              <img src="img/0.png" id="img4" />分
              <img src="img/0.png" id="img5" />
              <img src="img/0.png" id="img6" />秒
   </div>

　　2.设制一个定时器：

<script>

             setInterval(function() ,1000);

</script>

　　这行代码代表着，给这个函数定义每秒运行一次

　　3.定义定时器内的函数：

　　function() {

　　var now = new Date();//获取当下时间;

　　var hour = now.getHours();//获取当下小时;

　　var fen = now.getMinutes();//获取当下分钟;

　　var miao = now.getSeconds();//获取当下秒;

　　获取时间目的：由于这个函数是每秒都刷新的，所以当下时间一直变化，可以利用这个控制获取的照片的id，使照片一直刷新，达到制作一个电子时钟的目的。

　　var time=""+miao;//将秒转化为字符串;

　　var time2=""+fen;//将分钟转化为字符串;

　　var time3=""+hour;//将小时转化为字符串;

　　转化字符串目的：后边获取照片时候使用的是字符串，所以需要把得到的时间转化为字符串。

　　if(miao<10){

　　img5.src="img/"+0+".png";

　　img6.src = "img/"+time[0]+".png";}

　　else{

　　img5.src = "img/"+time[0]+".png";

　　img6.src="img/"+time[1]+".png";

　　}

　　这串代码的意思是：如果秒小于10，代表秒第一位的照片设置为0，第二位为获取的秒的字符串(因为如果实时的秒为一位数时，代表秒的第一位没有字符串表示)。

　　除了10以外，代表秒的第一位数字为获取的秒的第一位字符串，第二位为获取秒的第二位字符串。(分钟和小时同理)

　　if(fen<10){

　　img3.src="img/"+0+".png";

　　img4.src = "img/"+time2[0]+".png";}

　　else{

　　img3.src = "img/"+time2[0]+".png";

　　img4.src="img/"+time2[1]+".png";

　　}

　　if(hour<10){

　　img1.src="img/"+0+".png";

　　img2.src = "img/"+time3[0]+".png";}

　　else{

　　img1.src = "img/"+time3[0]+".png";

　　img2.src="img/"+time3[1]+".png";

　　}

　　}

　　在千锋郑州HTML5培训班的一个多月里，我学到了很多，包括如何制作网页，如何制作定时器等等。当然，HTML5所包含的知识很多，我只是学了一点皮毛，但我相信，在老师的带领下，在自己的不懈努力下，我一定可以学的更好，走的更远!