表钟的制作js

最新推荐文章于 2021-04-06 21:32:26 发布

码深

最新推荐文章于 2021-04-06 21:32:26 发布

阅读量144

点赞数

分类专栏：表钟的制作js 文章标签：表钟的制作js

本文链接：https://blog.csdn.net/weixin_43158701/article/details/103488124

版权

表钟的制作js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function toDou(n){
            if(n<10){
                return '0' + n;
            }else{
                return '' + n;
            }
        }
        window.onload = function(){
            var aimg = document.getElementsByTagName('img');
            function ticke(){
                var date = new Date();
            // alert(aimg.length);
            // alert(date);
                var str = toDou(date.getHours()) + toDou(date.getMinutes()) + toDou(date.getSeconds());
                for(var i=0;i<aimg.length;i++){
                    aimg[i].src = "img/" + str[i] + ".png";
                }
            }
            setInterval(ticke,1000);
            ticke();
            // alert(str);
        }
    </script>
</head>
<body style="background-color: black;color: white; font-size: 50px;">
    <img src="0.png" alt="">
    <img src="0.png" alt="">
    <span style="font-size: larger;">:</span>
    <img src="0.png" alt="">
    <img src="0.png" alt="">
    <span style="font-size: larger;">:</span>
    <img src="0.png" alt="">
    <img src="0.png" alt="">
    
</body>
</html>

效果图：

标明：str【i】不兼容ie7，charAt方法用来获取某个字符串的某个字符，ie7才会兼容。

码深

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表钟的制作js

代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
复制链接

扫一扫