时间图片显示制作

最新推荐文章于 2023-07-02 17:41:04 发布

唐策

最新推荐文章于 2023-07-02 17:41:04 发布

阅读量1k

点赞数

分类专栏： js JS日常小功能文章标签：时间同步

本文链接：https://blog.csdn.net/qq_29132907/article/details/78437872

版权

js 同时被 2 个专栏收录

46 篇文章

订阅专栏

JS日常小功能

28 篇文章

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="time">
        <img src="" alt="">
        <img src="" alt="">:
        <img src="" alt="">
        <img src="" alt="">:
        <img src="" alt="">
        <img src="" alt="">
    </div>
    <script type="text/javascript">
        window.onload=function(){
            var imgId=document.getElementsByTagName("img");
            function time(){
                function toDou(n){//小于10,前面添加0
                    if(n<10){
                        return '0'+n;
                    }else{
                        return ''+n;
                    }
                }
                var dataTime=new Date(); 
                var str=toDou(dataTime.getHours())+toDou(dataTime.getMinutes())+toDou(dataTime.getSeconds());
                for(var i=0;i<imgId.length;i++){
                    imgId[i].src=str.charAt(i)+'.jpg';//charAt(i)返回指定位置字符串
                    //imgId[i].src=src[i]+'.jpg';//src[i]不兼容IE7
                }
            };
            setInterval(time,1000);
            time();
        }
    </script>
</body>
</html>

Date对象的其他方法
刚才我们学习了Date对象获取时分秒的方法，实际上Date对象还有很多的方法：

getFullYear()，获取当前年份。
getMonth()，获取当前月，不过JS里的月是从0开始，因此我们在使用是通常将getMonth+1使用。
getDate() 获取当前日。
getDay() 获取当前星期，其值为0-6，由于国外的一周都是从周日算起，所以分别代表周日-周六。
延时提示框
我们在第一课就讲过鼠标提示框，但很多时候，当我们的鼠标离开元素的时候，提示框并不是立马消失而是过一段时间消失，同时我们还希望，当我们的鼠标移动到提示框的时候，提示框能够一直存在。为了达成这样延时提示框的效果就要用到setTimeout定时器。