数码时钟即通过图片数字来显示当前时间，需要显示的图片的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() 

}

  clock()

  setInterval(clock,1000)

}

function clock(){

  var now = new Date()

  var ctx = document.getElementById('canvas').getContext('2d')

  ctx.save()

  ctx.clearRect(0,0,150,150)

  ctx.translate(75,75)

  ctx.scale(0.4,0.4)

  ctx.rotate(-Math.PI/2)

  ctx.strokeStyle = "black"

  ctx.fillStyle = "white"

  ctx.lineWidth = 8

  ctx.lineCap = "round"

  // Hour marks

  ctx.save()

  for (var i=0i<12i++){

    ctx.beginPath()

    ctx.rotate(Math.PI/6)

    ctx.moveTo(100,0)

    ctx.lineTo(120,0)

    ctx.stroke()

  }

  ctx.restore()

  // Minute marks

  ctx.save()

  ctx.lineWidth = 5

  for (i=0i<60i++){

    if (i%5!=0) {

      ctx.beginPath()

      ctx.moveTo(117,0)

      ctx.lineTo(120,0)

      ctx.stroke()

    }

    ctx.rotate(Math.PI/30)

  }

  ctx.restore()

  var sec = now.getSeconds()

  var min = now.getMinutes()

  var hr  = now.getHours()

  hr = hr>=12 ? hr-12 : hr

  ctx.fillStyle = "black"

  // write Hours

  ctx.save()

  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )

  ctx.lineWidth = 14

  ctx.beginPath()

  ctx.moveTo(-20,0)

  ctx.lineTo(80,0)

  ctx.stroke()

  ctx.restore()

  // write Minutes

  ctx.save()

  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )

  ctx.lineWidth = 10

  ctx.beginPath()

  ctx.moveTo(-28,0)

  ctx.lineTo(112,0)

  ctx.stroke()

  ctx.restore()

  // Write seconds

  ctx.save()

  ctx.rotate(sec * Math.PI/30)

  ctx.strokeStyle = "#D40000"

  ctx.fillStyle = "#D40000"

  ctx.lineWidth = 6

  ctx.beginPath()

  ctx.moveTo(-30,0)

  ctx.lineTo(83,0)

  ctx.stroke()

  ctx.beginPath()

  ctx.arc(0,0,10,0,Math.PI*2,true)

  ctx.fill()

  ctx.beginPath()

  ctx.arc(95,0,10,0,Math.PI*2,true)

  ctx.stroke()

  ctx.fillStyle = "#555"

  ctx.arc(0,0,3,0,Math.PI*2,true)

  ctx.fill()

  ctx.restore()

  ctx.beginPath()

  ctx.lineWidth = 14

  ctx.strokeStyle = '#325FA2'

  ctx.arc(0,0,142,0,Math.PI*2,true)

  ctx.stroke()

  ctx.restore()

}

<script language="javascript">

now = new Date()

hour = now.getHours()

if (hour <12) {

document.write("今天是" + now.toLocaleString())

} else if (hour <18){

document.write("今天是" + now.toLocaleString())

} else if (hour >= 18){

document.write("今天是" + now.toLocaleString())

}

</script>

把上述程序复制到“ html ”格式的文件里并保存，然后打开即可看到效果。