js实现动态数码时钟

数码时钟

在写数码时钟之前，你需要准备0-9数字的图片，你可以自己在网上找，也可以通过ps自己制作喜欢的图片（图片要重命名为“数字”.jpg），下面我给大家简单介绍一下，数码时钟的原理。

1.首先，你需要在html5中定义一个div 用来包裹图片
2. 将图片放在一个images的文件夹中（方便寻找）。
3. 用css对html中的元素进行一个简单的布局。
4.构思一下时钟原理的实现。

html

以上是一些简单的布局,将div包裹图片

css样式

          h1{font-family: "微软雅黑";text-align:center;}#middle{width:1900px;height:500px;margin:100px auto;border:1px solid #000000;background-color:greenyellow;}img{float:left;width:px;height:200px;position:relative;z-index:2;margin-left:100px;top:150px;}#middle span{position:relative;font-size:80px;z-index:2;font-weight:bold;float:left;top:200px;left:50px;}

以上是一些对div和标题位置的简单布局，下面讲解的是一些思路。
思路：我们要提取到当前的时间，相信大家都知道用getHours()和getMinutes()和getSeconds(),那么我们怎么让这些时间来对应到数字0-9呢？（相信你在这也有了一定的疑惑）
00（时）:00（分）：00（秒）一共是6个数字，我们在上面的html中也定义了6个img标签，所以我们将让“时、分、秒”分别对应到img标签的位置上。
举个例子：
比如说当前的时间是：“12:23:56”,我们可以定义一个函数，将他转化成字符串的形式，如果有小于10的数我们用0代替写成“06”的形式，下面我来展示一下我的js代码：

function twoDigitsStr(n){if(n<10)      //当时间“时、分、秒”的数字小于10的时候return '0'+n;elsereturn ''+n;}
window.onload=function()
{var oDiv=document.getElementById('middle');var aImg=oDiv.getElementsByTagName('img');    //获取到img并定义为aImgfunction tick(){var oDate=new Date();var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());  //分别将时分秒获取到的值运行到twoDigitsStr()这个函数中for(var i=0;i<aImg.length;i++)   //for循环遍历{aImg[i].src="../img/"+str.charAt(i)+".jpg";  //图片位置}}setInterval(tick,1000);    //定时器每隔一秒会执行一下tick这个函数tick();
}

希望大家，多多支持，有好的编程想法可以共同讨论，学习。