数码时钟即通过图片数字来显示当前时间，需要显示的图片的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><head>
<script type="text/javascript">
<!--
window.onload=function(){
var oDiv=document.getElementById('time') // 获取DIV
function theTime(){
var theDate=new Date() // 创建一个日期对象
var year=theDate.getFullYear() // 获取年份
var month=theDate.getMonth() // 获取月份
var day=theDate.getDate() //获取日
var hour=theDate.getHours() //获取小时
var minues=theDate.getMinutes() // 获取分钟
var second=theDate.getSeconds() // 获取秒
oDiv.innerHTML="现在的时间是"+year+"年"+month+"月"+day+"日 "+hour+":"+minues+":"+second
}
theTime() // 执行时间函数
setInterval(theTime,1000) // 更新时间
}
//-->
</script>
</head>
<div id="time"></div>
</html>
你试下,，，，
