js实现简易数码时钟

数码时钟即通过图片数字来显示当前时间；

效果图：

HTML基础样式：

1 <body>
2     <div id="hour1"></div>
3     <div id="hour2"></div><span>:</span>
4     <div id="minute1"></div>
5     <div id="minute2"></div><span>:</span>
6     <div id="second1"></div>
7     <div id="second2"></div>
8 </body>

设置样式：

 1 <style>
 2         div
 3         {
 4             width: 200px;
 5             height: 170px;
 6             background-image: url("img/num.png");
 7             float: left;
 8         }
 9         span
10         {
11             float: left;
12             font-size: 40px;
13             line-height: 170px;
14         }
15 </style>

获取背景图中每个方块图片的坐标；

 1  var pointArray=[
 2             {x:825,y:170},
 3             {x:0,y:0},
 4             {x:205,y:0},
 5             {x:410,y:0},
 6             {x:615,y:0},
 7             {x:825,y:0},
 8             {x:0,y:170},
 9             {x:205,y:170},
10             {x:410,y:170},
11             {x:615,y:170}
12         ];
13 init();

获取所有div,设置计时器；

 1  function init() {
 2               // 获取所有的div
 3              var hour1=document.getElementById("hour1");
 4              var hour2=document.getElementById("hour2");
 5              var minute1=document.getElementById("minute1");
 6              var minute2=document.getElementById("minute2");
 7              var second1=document.getElementById("second1");
 8              var second2=document.getElementById("second2");
 9              animation();
10                //开启时间间隔运行
11              setInterval(animation,1000);
12         }

获取当前的时间，把当前数字的时间转换为字符；根据当前的时间给当前div设置对应的图片

 1 function animation() {
 2               //获取当前时间,并且把当前时间转换为字符,
 3             var date=new Date();
 4             var hour=getString(date.getHours());
 5             var minutes=getString(date.getMinutes());
 6             var seconds=getString(date.getSeconds());
 7                 //根据现在时间设置当前div的图片
 8             setImg(hour1,hour[0]);
 9             setImg(hour2,hour[1]);
10             setImg(minute1,minutes[0]);
11             setImg(minute2,minutes[1]);
12             setImg(second1,seconds[0]);
13             setImg(second2,seconds[1]);
14         }

 1     //给入数字,如果是小于10的,就加前导0,否则返回这个数字的字符
 2 function getString(num) {
 3      return num<10 ? "0"+num : num.toString();
 4 }
 5 
 6     //给入需要改变的div,给入需要改变的值,根据坐标数组中对应的数修改当前图片的坐标位置
 7  function setImg(elem,num) {
 8        elem.style.backgroundPositionX=-pointArray[num].x+"px";
 9        elem.style.backgroundPositionY=-pointArray[num].y+"px";
10   }

利用计时器以及获取日期的方法来完成了简易的电子时钟。