数码时钟（图片实现）

最新推荐文章于 2023-10-27 14:12:27 发布

阿寮

最新推荐文章于 2023-10-27 14:12:27 发布

阅读量1k

点赞数

分类专栏：笔记

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果展示：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数码时钟</title>
    <style>
        body{
            background: black;
            color: white;
            font-size: 40px;
        }
        img{
            width: 40px;
        }
    </style>
    <script>
     
     
        function toDou(n){
            if(n<10)
            {
                return '0'+n;
            }
            else
            {
                return ''+n;
            }
        }
        window.onload=function () {
            var aImg=document.getElementsByTagName('img');
            //var str='192354';



            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='../image视频and图片/数字'+str[i]+'.png';
                }
            }
            tick();
           setInterval(tick,1000);   //每隔一秒刷新（执行）一次

        };

    </script>
</head>
<body>
<div>
      <img src="../image视频and图片/数字0.png" alt="">
      <img src="../image视频and图片/数字0.png" alt="">
      ：
      <img src="../image视频and图片/数字0.png" alt="">
      <img src="../image视频and图片/数字0.png" alt="">
      ：
      <img src="../image视频and图片/数字0.png" alt="">
      <img src="../image视频and图片/数字0.png" alt="">

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

阿寮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
数码时钟（图片实现）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>数码时钟</title> <style> body{ background: black; ...
复制链接

扫一扫