var t = 0
var flag1
function studyTime()
{
hour=parseInt(t/60/60)
minute=parseInt(t/60%60)
second=parseInt(t%60)
document.getElementById('SECOND').innerHTML=second
document.getElementById('HOUR').innerHTML=hour
document.getElementById('MINUTE').innerHTML=minute
t = t + 1
flag1 = setTimeout("studyTime()", 1000)
}
设计思路：数码时钟即通过图片数字来显示当前时间，需要显示的图片的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()
}
