JS做时钟

最新推荐文章于 2022-07-10 17:30:36 发布

杨亚仑

最新推荐文章于 2022-07-10 17:30:36 发布

阅读量432

点赞数

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/yangyalun/article/details/79865231

版权

JavaScript学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="系统CSS初始化.css">
    <style>
       ul{
           height: 100px;
           width: 600px;

           margin: 200px auto;
       }
        img{
            float:left;
        }
        span{
            font-size: 100px;
            float: left;
            display: block;
            position: relative;
            bottom: 20px;
        }
    </style>
    <script>
        window.onload=function ()
        {
            function setDoub(n) {
                if(n<10)
                {
                    n='0'+n;
                }
                else
                {
                    n=''+n;
                }
                return n;
            }
            var aImg=document.getElementsByTagName("img");
            function tick() {
                var date=new Date();
                var str=setDoub(date.getHours())+setDoub(date.getMinutes())+setDoub(date.getSeconds());
                for(var i=0;i<aImg.length;i++)
                {
                    aImg[i].src="images/"+str[i]+".png";
                }
            }
           tick();

            setInterval(tick,1000)
        }
    </script>
</head>
<body>
    <ul id="ul1">
    <img src="images/0.png">
    <img src="images/0.png">
        <span>:</span>
    <img src="images/0.png">
    <img src="images/0.png">
        <span>:</span>
    <img src="images/0.png">
    <img src="images/0.png">
    </ul>

</body>
</html>

杨亚仑

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS做时钟

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" type="text
复制链接

扫一扫