本日的主题紧张是利用定时器来做几个常用的小效果，由于代码编辑起来太麻烦，紧张讲思路和主要代码部分。
用到的部分函数大家可以去http://www.w3school.com.cn/学习详细内容。

一、动态数码时钟设计思路

动态数码时钟效果图

先从最大略的提及，暂时不用图片显示韶光，先用笔墨直接在页面上显示韶光。

htmljs动态时钟javascript入门系列之二准时器应用之动态数码时钟 PHP
（图片来自网络侵删）

（1）获取当前的系统韶光。
用到的是Date工具，这是专门为韶光而设计的。

function timer() //创建一个timer函数，方便往后操作

{

var oDate = new Date(); //创建一个韶光工具

var hours = oDate1.getHours(); //取得当前的小时数

var minutes = oDate1.getMinutes(); //取得当前的分钟数

var seconds = oDate1.getSeconds(); //取得当前的秒数

}

可以先用alert()函数测试下每个变量的输出结果（一定自己试下哦）

（2）办理第一步韶光输出的问题。
我们希望韶光显示为11:03:38，即小时、分钟、秒都显示为两位数的格式。
为此，我们设计一个函数用于将显示一位的变成两位显示出来。
新建一个函数toDou()

function toDou(n){

if(n < 10){

return \公众0\"大众 + n;

}else{

return \"大众\公众 + n;

}

}

这样，就可以将我们获取到的韶光丢到函数内，返回一个两位数的字符串。

（3）将韶光字符串显示到页面上。
这里须要用到innerHTML函数（详细效果自己查哦）

oDiv = document.getElementById(\公众div1\"大众);

oDiv.innerHTML = \"大众现在的韶光是：\"大众 + toDou(hours) + \"大众:\"大众 + toDou(minutes) + \"大众:\"大众 + toDou(seconds);

这时候就会把韶光显示到页面的div标签中了。

（4）设置定时器。
由于是每隔一秒实行一次，以是选择setInterval()。

setInterval(timer, 1000);

（5）不知道大家创造问题了没有，当刷新页面的时候，会有一秒钟的空缺（这个在用图片显示韶光的例子中可能表现的更明显），这是为什么呢？很大略，我们设置的是一秒后才开始实行timer()。

办理办法：在末了加上一个timer(); 相称于网页一加载就先运行一下timer()，然后每隔一秒再运行timer()。

问题办理，到此为止，一个动态韶光显示的效果就出来了。

二、带图片的动态时钟设计思路

（1）先在页面上添加时钟图片（暂且不考虑样式好不好看，紧张谈事理）

<img src=\"大众./images/0.jpg\"大众 alt=\"大众\"大众>

<img src=\"大众./images/0.jpg\"大众 alt=\"大众\公众>

:

<img src=\"大众./images/0.jpg\"大众 alt=\"大众\公众>

<img src=\"大众./images/0.jpg\"大众 alt=\"大众\"大众>

:

<img src=\"大众./images/0.jpg\"大众 alt=\"大众\公众>

<img src=\公众./images/0.jpg\"大众 alt=\"大众\公众>

（2）获取当前的韶光，天生一个表示韶光的字符串，如“122222”，表示12:22:22

//获取当前的韶光

var oDate = new Date();

var hours = oDate.getHours();

var minutes = oDate.getMinutes();

var seconds = oDate.getSeconds();

// 天生一个表示韶光的数字字符串，如“122222”，表示12:22:22

var str = toDou(hours) + toDou(minutes) + toDou(seconds);

（3）修正每张图片的src属性

var aImg = document.getElementsByTagName(\"大众img\公众);

var len = aImg.length;

for(var i=0; i<len; i++){

aImg[i].src = \"大众images/\公众 + str.charAt(i) +\"大众.jpg\"大众;

}

这里利用了str.charAt(i)而不是str[i]，没有情由，仅为兼容。

到这里为止，接下来该怎么做，大家动手试一下吧。
完全代码欢迎大家到我的百度云盘https://pan.baidu.com/s/1o85Bnlw下载。