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

}

<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>

我简单写了个 你看看

<head></head>

<body onload="time()">

<script type="text/javascript">

var count = 11

function time(){

count--

if(count <= 0){

count = 6

time1()

return

}

document.getElementById('msg').innerHTML = '购买倒计时还剩0分'+count+'秒'

setTimeout(time,1000)

}

function time1(){

count --

if(count <= 0){

count = 11

time()

return

}

document.getElementById('msg').innerHTML = '付款倒计时还剩0分'+count+'秒'

setTimeout(time1,1000)

}

</script>

<div id="msg"></div>

</body>