数码时钟即通过图片数字来显示当前时间，需要显示的图片的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()
}
<div id="d"></div><canvas id="clock" width="400" height="400"></canvas>
<script type="text/javascript">
var time = new Date()
var h = time.getHours()//时
var m = time.getMinutes()//分
var s = time.getSeconds()//秒
h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12)//时针 初始位置
//=====================================
var x=200,y=200,sAngle=0//x y 原点 秒针角度变量
function draw(){
var c=document.getElementById("clock")
var ctx=c.getContext("2d")//获取绘图对象
ctx.clearRect(0,0,c.width,c.height)//清除上次绘制的图形
s++//秒针
ctx.fillStyle = '#fff' //填充白色背景色
ctx.fillRect(0,0,c.width,c.height) //设置画布区域
//填充圆点，在画布中心（200,200）绘制一个半径10px的圆形
ctx.beginPath()
ctx.arc(x,y,10,0,Math.PI*2,true)
ctx.fill()
ctx.closePath()
//填充版权文字
ctx.fillStyle="#ccc"
ctx.font = "12pt Arial"
ctx.fillText(" beyond",150,250)
//调用日期并填充到画布中
ctx.fillStyle="#666"
ctx.font = "14pt Verdana"
ctx.fillText(time.getMonth()+1+"-"+time.getDate(),183,170)
ctx.save()//保存当前绘图状态
// 时间刻度
for(var i=0i<12i++){
var angle=(Math.PI*2)/12
ctx.beginPath()//开始绘制
ctx.font="12px Arial"
if(i==0||i==3||i==6||i==9){
ctx.fillStyle="red"
radius=4
}else{
ctx.fillStyle="blue"
radius=3
}
ctx.arc(x,y-100,radius,0,Math.PI*2,true)//画圆
ctx.fill()//填充路径
trans(ctx,x,y,angle) //刻度分布
}
ctx.restore()//恢复上次保存的绘图状态
sAngle=(Math.PI*2)/60*s//秒度
//时针转动
ctx.save()
ctx.strokeStyle="red"
ctx.lineWidth=3
trans(ctx,x,y,(Math.PI*2)/60*h)
pointer(ctx,x,y,y-40)
ctx.restore()
//分针转动
ctx.save()
ctx.strokeStyle="blue"
ctx.lineWidth=2
trans(ctx,x,y,(Math.PI*2)/60*m)
pointer(ctx,x,y,y-68)
ctx.restore()
//秒针转动
ctx.save()
ctx.strokeStyle="#000"
trans(ctx,x,y,sAngle)
pointer(ctx,x,y,y-80)
ctx.restore()
//数据整理
if(s%60==0){
sAngle=0,s=0,m++
if(m%12==0){ //每十二分 时针旋转一次
if(m!=0)h++
if(m%60==0)m=0
}
if(h%60==0)h=0
}
}
//绘制指针
function pointer(ctx,x,y,z){
ctx.beginPath()
ctx.moveTo(x,y)
ctx.lineTo(x,z)
ctx.stroke()
ctx.fill()
}
//据坐标旋转
function trans(ctx,x,y,angle){
ctx.transform(Math.cos(angle), Math.sin(angle),
-Math.sin(angle), Math.cos(angle),
x*(1-Math.cos(angle)) + x*Math.sin(angle),
y*(1-Math.cos(angle)) - y*Math.sin(angle))
}
setInterval("draw()",1000)
</script>
</div>
