数码时钟即通过图片数字来显示当前时间，需要显示的图片的URL根据时间变化而变化。
a、获取当前时间Date()并将当前时间信息转换为一个6位的字符串
b、根据时间字符串每个位置对应的数字来更改图片的src的值，从而实现更换显示图片
构建HTML基础并添加样式。
<div id="div1">
<img src='./数字时钟（1）_files/0.jpg'>
<img src='./数字时钟（1）_files/0.jpg'>
:
<img src='./数字时钟（1）_files/0.jpg'>
<img src='./数字时钟（1）_files/0.jpg'>
:
<img src='./数字时钟（1）_files/0.jpg'>
<img src='./数字时钟（1）_files/0.jpg'>
</div>
style样式
#div1{
width:50%
margin:300px auto
background:black
}
获取图片元素以及当前时间：
var oDiv=document.getElementById('div1')
var aImg=oDiv.getElementsByTagName('img')
var oDate=new Date()
var str=oDate.getHours()+oDate.getMinutes()+oDate.getSeconds()
这里出现两个问题
1、oDate.getHours()返回的都是数字，这样编写为数字相加，而非字符串相加。
2、当获取的值为一位数时，会造成字符串的个数少于6，不满足初始设计要求。
解决以上两个问题的代码解决方案：
代码
var oDiv=document.getElementById('div1')
var aImg=oDiv.getElementsByTagName('img')
var oDate=new Date()
function twoDigitsStr()
{
if(n<10)
{return '0'+n}
else
{return ''+n}
}
var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds())
设置所有图片的src值：
for(var i=0i<aImg.lengthi++)
{
aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg"
}
通过setInterval()来实现每隔1秒进行重新获取当前时间以及图片src值：
代码
var oDiv=document.getElementById('div1')
var aImg=oDiv.getElementsByTagName('img')
setInterval(function tick()
{
var oDate=new Date()
var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds())
for(var i=0i<aImg.lengthi++)
{
aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg"
}
}
,1000)
但是还是有一个问题，网页在打开的初始阶段，显示时间为00：00：00，这是因为定时器有个特性，当定时器被打开后，不会立刻执行里面的函数，而是在1秒后执行。解决代码：
var oDiv=document.getElementById('div1')
var aImg=oDiv.getElementsByTagName('img')
function tick()
{var oDate=new Date()
var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds())
for(var i=0i<aImg.lengthi++)
{
aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg"
}
}
setInterval(tick,1000)
tick()
问题：代码setInterval(tick,1000)中函数tick没有带括号，那么JS中函数带括号与不带括号有什么区别？
完整的数码时钟制作JS代码为：
function twoDigitsStr(n)
{
if(n<10)
{return '0'+n}
else
{return ''+n}
}
window.onload=function()
{
var oDiv=document.getElementById('div1')
var aImg=oDiv.getElementsByTagName('img')
function tick()
{var oDate=new Date()
var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds())
for(var i=0i<aImg.lengthi++)
{
aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg"
}
}
setInterval(tick,1000)
tick()
}
<html><script>
window.onload = function() {
var clock = document.getElementById('clock')
var color = ['red', 'green', 'yellow', 'blue', 'black', 'gold', 'orange', 'gray', 'pink', 'maroon'] //钟表颜色数组
setInterval(function() {
var now = new Date()
clock.innerHTML = now.getFullYear() + '年' + (now.getMonth()+1) + '月' + now.getDate() + '日' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds()
var radom = Math.floor(Math.random() * color.length + 1) - 1 //随机数
clock.style.color = color[radom] //设置随机颜色
}, 1000)
}
</script>
<body>
<span id="clock" style="font-size:20px"></span>
</body>
</html>
