《JavaScript学习笔记八》：数字时钟的实现

最新推荐文章于 2024-01-31 18:24:04 发布

HelloWorld_EE

最新推荐文章于 2024-01-31 18:24:04 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： javascript 数字时钟定时器

本文链接：https://blog.csdn.net/u010412719/article/details/51540768

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

《JavaScript学习笔记八》：数字时钟的实现

在我们的生活中，数字时钟随处可见，在我们的手机上，在我们的电脑上，以及在一些时间软件上，都可以看到数字时钟，与下图类似，这篇博文我们就来模拟下数字时钟的实现。

首先我们来实现时间部分，效果图如下：

这个功能相对比较简单，就是根据Date对象的一些获取时间的方法来获取时间并拼接为一个字符串，然后根据字符串上每位的数字来显示0~9的图片资源即可。

Date对象的方法有：
(图片来至于这里：http://www.w3school.com.cn/jsref/jsref_obj_date.asp)

具体实现代码如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    #div1 {width:400px;height:100px;background:white;left:200px;top:200px;}
    </style>
    <script>
    //将一位数通过补零补位两位数，而如果num本来是两位数，则不变
    function toDou(num)
    {
        if(num<10)
        {
            return '0'+num;
        }
        else
        {
            return ''+num;
        }
    }
    window.onload=function ()
    {
        var oDiv = document.getElementById('div1');
        var aImg=oDiv.getElementsByTagName('img');
        function  ticker()
        {
            var date =new Date();
            //alert(date.getHours());
            var str=toDou(date.getHours())+toDou(date.getMinutes())+toDou(date.getSeconds());

            //var str='123234';
            for(var i=0;i<aImg.length;i++)
            {
                //aImg[i].src='img/'+str[i]+'.png';//由于兼容器str[i]  用str.charAt(i)替代比较好;
                aImg[i].src='img/'+str.charAt(i)+'.png';
            }
        }
        setInterval(ticker,1000);
        ticker();//在这里直接调用ticker();则就可以消除上一个版本的情况
    };
    </script>
    </head>

    <body>
    <div id="div1">
        <img src="img/0.png" />
        <img src="img/0.png" />
        ：
        <img src="img/0.png" />
        <img src="img/0.png" />
        ：
        <img src="img/0.png" />
        <img src="img/0.png" />

    </div>
    </body>
    </html>

有了如上的代码，则实现如下效果的时钟就相当容易了。

代码如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    #div1 {width:800px;height:400px;background:white;left:200px;top:200px;}
    </style>
    <script>
    //如果num的位数不是len，则通过在高位补零使得其长度为len
    function zeroFill(num,len)
    {
        var originNum=num;
        var index=0;
        while(num)
        {
            index++;
            num=parseInt(num/10);//注意：这里要进行转换，num/10是一个小数
        }
        var res='';
        for(var i=0;i<len-index;i++)
        {
            res+='0';
        }
        return res+originNum;
    }
    window.onload=function ()
    {
        var oDiv = document.getElementById('div1');
        var aImg=oDiv.getElementsByTagName('img');
        function  ticker()
        {
            var date =new Date();
            var str=zeroFill(date.getFullYear(),4)+zeroFill(date.getMonth()+1,2)+zeroFill(date.getDate(),2)+zeroFill(date.getHours(),2)+zeroFill(date.getMinutes(),2)+zeroFill(date.getSeconds(),2);
            //alert(str);
            //var str='123234';
            for(var i=0;i<aImg.length;i++)
            {
                //aImg[i].src='img/'+str[i]+'.png';//由于兼容器str[i]  用str.charAt(i)替代比较好;
                aImg[i].src='img/'+str.charAt(i)+'.png';
            }
        }
        setInterval(ticker,1000);
        ticker();//在这里直接调用ticker();则就可以消除上一个版本的情况
    };
    </script>
    </head>

    <body>
    <div id="div1">
        <img src="img/0.png" />
        <img src="img/0.png" />
        <img src="img/0.png" />
        <img src="img/0.png" />
        /
        <img src="img/0.png" />
        <img src="img/0.png" />
        /
        <img src="img/0.png" />
        <img src="img/0.png" />
        //
        <img src="img/0.png" />
        <img src="img/0.png" />
        :
        <img src="img/0.png" />
        <img src="img/0.png" />
        ：
        <img src="img/0.png" />
        <img src="img/0.png" />

    </div>
    </body>
    </html>

参考资料

1、blue老师的《js视频教程》

HelloWorld_EE

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript学习笔记八》：数字时钟的实现

《JavaScript学习笔记八》：数字时钟的实现在我们的生活中，数字时钟随处可见，在我们的手机上，在我们的电脑上，以及在一些时间软件上，都可以看到数字时钟，与下图类似，这篇博文我们就来模拟下数字时钟的实现。首先我们来实现时间部分，效果图如下：这个功能相对比较简单，就是根据Date对象的一些获取时间的方法来获取时间并拼接为一个字符串，然后根据字符串上每位的数字来显示0~9的图片资源即可。Date对象
复制链接

扫一扫