前端作品一之——网页数字时钟制作

1、制作前准备

　　在素材网上挑选你喜欢的0~9的数字图片，下载下来，用PS将这些图片切成合适在网页上显示的的大小（我切成50px*60px）。

2、布局

　　在HTML将这几张图片引用进去，并排显示，并在每两个中间加上“：”，将包含图片标签的DIV设置成居中。

3、功能实现

　　将初始的图片显示都设置成数字0，这时在静态页面上会显示“00:00:00”；因为之前已经给图片命名为0~9.png
通过getHours()、getMinutes()、getSeconds()分别获取时分秒这六个数值（需要注意的是当系统时间的时分秒小于10得在前面补0，这样才能和图片标签里的数组一一对应），
然后将这六个值传递给图片标签数组的文件名。并通过setInterval(timer,1000)来通过时间的变化完成相应数字图片的切换。 

<!DOCTYPE html>
<html lang="en">
<head>
<!-- 敲者：ChenZz~ -->
    <meta charset="UTF-8">
    <title>唯美数字时钟</title>
    <style type="text/css">
    * { padding: 0; margin: 0; }
    body{background: black;}
    #div1 {
         width: 600px; height: 200px;color: white;font-size: 50px; margin:50px auto;
    }
    </style>
<!--     设置为变化的时钟timer
    Date函数，获取系统时钟
    将src里的图片替换成系统时钟，
    系统时间不是两位数时间的判断，考虑'0'+'系统数字' -->
    <script type="text/javascript">
    window.onload=function()
    {

        var oDiv1=document.getElementById('body1');
        var aImg=document.getElementsByTagName('img');
        //var str='012332';
        timer=function()
        {

            //设置补0函数
            function toDou(n)
            {
                if (n<10) 
                    {
                        return '0'+n;
                    }
                    else
                    {
                        return ''+n;
                    }
            }
            //获取系统时钟的函数
            var aDate=new Date();
            var str=toDou(aDate.getHours())+toDou(aDate.getMinutes())+toDou(aDate.getSeconds());
            for (var i = 0; i < aImg.length; i++) {
                aImg[i].src='numberPicture/'+str.charAt(i)+'.png';
            };
        }
        setInterval(timer,1000);
        timer();
    }

    </script>



</head>
<body id="body1">
<div id="div1">
<img src="numberPicture/0.png">
<img src="numberPicture/0.png">
:
<img src="numberPicture/0.png">
<img src="numberPicture/0.png">
:
<img src="numberPicture/0.png">
<img src="numberPicture/0.png">
</div>
</body>
</html>

 

posted @ 2015-10-22 16:25  ChenZz~  阅读(1758)  评论(0)    收藏  举报