js实现页面动态时间，滚动效果（年月日，小时、分钟、秒，星期，毫秒）

最新推荐文章于 2024-08-06 23:12:50 发布

sweetllh

最新推荐文章于 2024-08-06 23:12:50 发布

阅读量6.2k

点赞数 2

分类专栏： javascript 运动

本文链接：https://blog.csdn.net/sweetllh/article/details/70247339

版权

javascript 同时被 2 个专栏收录

73 篇文章 3 订阅

订阅专栏

运动

7 篇文章 0 订阅

订阅专栏

年月日放在一个div里面；
小时、分钟、秒放在一个div里面；
星期放在一个div里面；
毫秒放在一个div里面。
因为它们的时间设置不同或img类不同

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js制作一个动态页面时间，滚动效果</title>
    <style type="text/css">
        .clock{
            width: 520px;
            height: 520px;
            border-radius: 50%;
            margin: 0 auto;
            margin-top: 100px;
            background: url(images/bg.png) no-repeat ;
            position: relative;
        }

        .title{
            width: 195px;
            height: 45px;
            background: url(images/title.png) no-repeat;
            position: absolute;
            top: 110px;
            left: 160px;
        }


        .ymd{
            position: absolute;
            top: 190px;
            left: 70px;
        }

        .hms{
            position: absolute;
            top: 250px;
            left: 138px;
        }

        .millis{
            position: absolute;
            top: 310px;
            left: 190px;
            padding: 5px 30px;
            border: 3px solid #f00;
        }

        .day{
            position: absolute;
            top: 390px;
            left: 210px;
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="title"></div>
        <div class="box">
            <div class="ymd">
                <!--年-->
                <img src="images/0.png" > 
                <img src="images/0.png" >
                <img src="images/0.png" >
                <img src="images/0.png" >
                <!--图标：-->
                <span style="display: inline-block; width: 38px; height: 40px; background: url(images/year.png) no-repeat;"></span>

                <!--月-->
                <img src="images/0.png" > 
                <img src="images/0.png" >
                <!--图标：-->
                <span style="display: inline-block; width: 38px; height: 40px; background: url(images/month.png) no-repeat;"></span>

                <!--日-->
                <img src="images/0.png" > 
                <img src="images/0.png" >
                <!--图标：-->
                <span style="display: inline-block; width: 38px; height: 40px; background: url(images/00.png) no-repeat;"></span>
            </div>  

            <div class="hms">
                <!--时-->
                <img src="images/0.png" > 
                <img src="images/0.png" >
                <!--图标：-->
                <span style="display: inline-block; width: 25px; height: 37px; background: url(images/sign.png) no-repeat;"></span>

                <!--分-->
                <img src="images/0.png" > 
                <img src="images/0.png" >
                <!--图标：-->
                <span style="display: inline-block; width: 25px; height: 37px; background: url(images/sign.png) no-repeat;"></span>

                <!--秒-->
                <img src="images/0.png" > 
                <img src="images/0.png" >
                <!--图标：-->
            </div>  
        </div>

        <!--毫秒-->
        <div class="millis">
            <img src="images/0.png" > 
            <img src="images/0.png" >
            <img src="images/0.png" > 
        </div>

        <!--周-->
        <div class="day">
            <span style="display: inline-block; width: 78px; height: 38px; background: url(images/week.png) no-repeat;"></span>
            <img src="images/00.png"  />
        </div>
    </div>
</body>
</html>

javascript

<script type="text/javascript">
//  判断时间的位数
    function toNum(num){
        if (num<10){return '0'+num;}
        else{return ''+num;}
    }   

    (function(){
        var imgs=document.querySelectorAll('.box img'); 
        var imgsD=document.querySelectorAll('.day img');
        setInterval(function(){
//          获取当前时间
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth()+1;
            var date = now.getDate();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();

//          星期与其它时间分开写
            var day = now.getDay();
            imgsD[0].src='images/0'+day+'.png'; 

//          获取除星期、毫秒的时间字符串
            var now1=toNum(year)+toNum(month)+toNum(date)+toNum(hours)+toNum(minutes)+toNum(seconds);

//          除星期时间，时间是什么就显示图片是什么
            for(var i=0;i<imgs.length;i++){
                imgs[i].src='images/'+now1[i]+'.png'; 
            }

        },1000)

        //          毫秒
            setInterval(function(){
                var now = new Date();
                var millis = now.getMilliseconds();
                var imgsM=document.querySelectorAll('.millis img');
                imgsM[0].src='images/'+parseInt(millis%1000/100)+'.png';
                imgsM[1].src='images/'+parseInt(millis%1000%100/10)+'.png';
                imgsM[2].src='images/'+parseInt(millis%1000%100%10)+'.png';
                },100)
    })();
</script>