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;
        else
        return ''+n;
    }
window.onload=function()
{
    var oDiv=document.getElementById('middle');
    var aImg=oDiv.getElementsByTagName('img');    //获取到img并定义为aImg
    function 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(); 
}

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