数码时钟即通过图片数字来显示当前时间；
效果图：
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 }
利用计时器以及获取日期的方法来完成了简易的电子时钟。