数码时钟

最新推荐文章于 2020-04-04 09:56:06 发布

sunny_Destiny

最新推荐文章于 2020-04-04 09:56:06 发布

阅读量260

点赞数 1

本文链接：https://blog.csdn.net/sunny_Destiny/article/details/104492836

版权

数码时钟

今天我们来学习如何制作数码时钟，我们先来看一下效果图。

数码时钟

接下来我们来分析一下代码。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>数码时钟</title>
        <script>
            function toDou(n) {
                if(n < 10) {
                    return '0' + n;
                } else {
                    return '' + n;
                }
            }
            window.onload = function() {
                var aImg = document.getElementsByTagName('img');

                function tick() {
                    var oDate = new Date();
                    var str = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) + toDou(oDate.getSeconds());
                    for(var i = 0; i < aImg.length; i++) {
                        aImg[i].src = 'img/' + str.charAt(i) + '.png';
                    }
                }
                setInterval(tick, 1000);
                tick();
            }
        </script>
    </head>

    <body style="background: #000000;color: #ffffff;font-size: 50px;">
        <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">

    </body>

</html>

这里面的知识点为：
一、获取系统时间
1.Date对象
2.getHours()、getMinutes()、getSeconds()

var oDate = new Date();
var str = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) + toDou(oDate.getSeconds());

二、显示系统时间
1.字符串连接
2.空位补零

    function toDou(n) {
                if(n < 10) {
                    return '0' + n;
                } else {
                    return '' + n;
                }
            }

三、设置图片路径
1.chatAt方法

for(var i = 0; i < aImg.length; i++) {
                        aImg[i].src = 'img/' + str.charAt(i) + '.png';
                    }

好了，今天的学习就到这里了。
愿你三冬暖,愿你春不寒;愿你天黑有灯,下雨有伞。

小晴天.jpg

sunny_Destiny

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数码时钟

数码时钟今天我们来学习如何制作数码时钟，我们先来看一下效果图。数码时钟接下来我们来分析一下代码。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>数码时钟</title> ...
复制链接

扫一扫