数字时钟

最新推荐文章于 2023-07-08 12:58:32 发布

前端小小坤

最新推荐文章于 2023-07-08 12:58:32 发布

阅读量912

点赞数

本文链接：https://blog.csdn.net/qq_42697338/article/details/82227228

版权

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <script type="text/javascript">
        1. 首先设置一个DIV并且插入六张图片表示时间：
            <
            div id = "box" >
            <
            img src = "img/0.png"
        id = "img1" / >
            <
            img src = "img/0.png"
        id = "img2" / > 时 <
            img src = "img/0.png"
        id = "img3" / >
            <
            img src = "img/0.png"
        id = "img4" / > 分 <
            img src = "img/0.png"
        id = "img5" / >
            <
            img src = "img/0.png"
        id = "img6" / > 秒 <
            /div>
        2. 设制一个定时器：
            <
            script >
            setInterval(function(), 1000);

        这行代码代表着， 给这个函数定义每秒运行一次
        3. 定义定时器内的函数：
        function() {
            var now = new Date(); //获取当下时间；
            var hour = now.getHours(); //获取当下小时；
            var fen = now.getMinutes(); //获取当下分钟；
            var miao = now.getSeconds(); //获取当下秒；
            获取时间目的： 由于这个函数是每秒都刷新的， 所以当下时间一直变化， 可以利用这个控制获取的照片的id， 使照片一直刷新， 达到制作一个电子时钟的目的。
            var time = "" + miao; //将秒转化为字符串；
            var time2 = "" + fen; //将分钟转化为字符串；
            var time3 = "" + hour; //将小时转化为字符串；
            转化字符串目的： 后边获取照片时候使用的是字符串， 所以需要把得到的时间转化为字符串。
            if(miao < 10) {
                img5.src = "img/" + 0 + ".png";
                img6.src = "img/" + time[0] + ".png";
            } else {
                img5.src = "img/" + time[0] + ".png";
                img6.src = "img/" + time[1] + ".png";
            }
            这串代码的意思是： 如果秒小于10， 代表秒第一位的照片设置为0， 第二位为获取的秒的字符串。（ 因为如果实时的秒为一位数时， 代表秒的第一位没有字符串表示）
            除了10以外， 代表秒的第一位数字为获取的秒的第一位字符串， 第二位为获取秒的第二位字符串。（ 分钟和小时同理）
            if(fen < 10) {
                img3.src = "img/" + 0 + ".png";
                img4.src = "img/" + time2[0] + ".png";
            } else {
                img3.src = "img/" + time2[0] + ".png";
                img4.src = "img/" + time2[1] + ".png";
            }
            if(hour < 10) {
                img1.src = "img/" + 0 + ".png";
                img2.src = "img/" + time3[0] + ".png";
            } else {
                img1.src = "img/" + time3[0] + ".png";
                img2.src = "img/" + time3[1] + ".png";
            }
        }
    </script>
</body>

前端小小坤

关注

0
点赞
踩
0

收藏

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

&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;script type="text/javascript"&gt; 1. 首先设置一个DIV并且插入六张图片
复制链接

扫一扫