用JS做时钟

不言原创: 2018-04-10 11:52:191927浏览

本篇文章介绍的内容是关于用JS做时钟的代码，现在分享给大家，有需要的朋友可以参考一下

<!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=&#39;0&#39;+n;
                }                else                {
                    n=&#39;&#39;+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>

以上是用JS做时钟的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：JS的延时器下一篇：js的排序算法

查看更多