js时间对象实践滚动时间

最新推荐文章于 2022-11-08 20:41:47 发布

唐伯虎電蚊香

最新推荐文章于 2022-11-08 20:41:47 发布

阅读量948

点赞数 1

分类专栏：前端 js

本文链接：https://blog.csdn.net/qq_36602186/article/details/80751459

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>hello world~!!</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <style>
    *{margin: 0;padding: 0;}
    .clearfix:after{content:'';display:block;clear:both;}
    .fl{float:left;}
    .fr{float:right;}
    #time{
        width:500px;
        padding:20px;
        height:80px;
        border:1px solid #ccc;
        margin:50px auto;
        font-size:25px;
    }
    #time ul{
      overflow:hidden;
    }
    #time ul li{
        list-style: none;
        float:left;
        width:45px;
        height:61px;
        text-align:center;
        position: relative;
    }
    #time ul li img{
        position: absolute;
    }
    #time ul li img.time{
        top:0px;
    }
    #time ul li img.sub{
        top:61px;
    }


    </style>
</head>
<body>
    <div class="" id="time">
        <ul class='clearfix'>
            <li>
                <img class='time' src="../images/bannerimg/0.png" >
                <img class='sub' src="../images/bannerimg/0.png" >
            </li>

            <li>
                <img class='time' src="../images/bannerimg/0.png" >
                <img class='sub' src="../images/bannerimg/0.png" >
            </li>

            <li><img src="../images/bannerimg/d.png" alt=""></li>

            <li>
                <img class='time' src="../images/bannerimg/0.png" >
                <img class='sub' src="../images/bannerimg/0.png" >
            </li>

            <li>
                <img class='time' src="../images/bannerimg/0.png" ><img class='sub' src="../images/bannerimg/0.png" >
            </li>

            <li><img src="../images/bannerimg/d.png" alt=""></li>

            <li>
                <img class='time' src="../images/bannerimg/0.png" ><img class='sub' src="../images/bannerimg/0.png" >
            </li>
            <li>
                <img class='time' src="../images/bannerimg/0.png" ><img class='sub' src="../images/bannerimg/0.png" >
            </li>
        </ul>
    </div>
</body>
<script>
    

    var imgTime = document.getElementsByClassName('time');
    var imgSub  = document.getElementsByClassName('sub');
    var aImgLi = [];

    var arr_t = getDateTime().split('')


    for (var i = 0,len = arr_t.length; i < len; i++) {
        aImgLi.push(imgTime[i].parentElement);
        setNumImg(i);
    }

    function setNumImg(i){
        imgTime[i].src = '../images/bannerimg/' + parseInt(arr_t[i]) + '.png';
        imgSub[i].src = '../images/bannerimg/' + (parseInt(arr_t[i]) + 1 == 10? 0 :parseInt(arr_t[i]) + 1) + '.png';

    }

    setInterval(function(){
        var arr_current_t = getDateTime().split('');
        var target = parseFloat( getStyle(imgTime[0],'height'))
        for (var i = 0,len = arr_t.length; i < len; i++) {
            if(arr_t[i] != arr_current_t[i]){
                animation(aImgLi[i],'top',target,500,i) 
            }
        }
        arr_t = arr_current_t;
    },1000)

    

    function animation(obj,attr,target,time,index){
        var init = 0;//
        var init_t = new Date();//当前时间
        //函数自执行 创建立即执行
        (function fn(){
            var ani_t  = new Date()- init_t;;//动画执行的时间
            var prop = ani_t/time;//时间比例
            var val = (target - init)*prop;
            if(ani_t >= time){
                ani_t = time;
                obj.style[attr] = -(init + val) + 'px'; 
                setNumImg(index);
                obj.style[attr] =  '0px'; 
            }else{
                obj.style[attr] = -(init + val) + 'px'; 
                window.requestAnimationFrame(fn);
            }

                
        })();    
    }

    function getStyle(obj,attr){
        return window.getComputedStyle?window.getComputedStyle(obj)[attr]:obj.curentStyle[attr];
    }


    function getDateTime(){
        var date = new Date();
        var h = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();
        h = h >= 10 ? h : '0' + h;
        min = min >= 10 ? min : '0' + min;
        s = s >= 10 ? s : '0' + s;
        return h + '' + min + '' + s;
    }
</script>
</html>

唐伯虎電蚊香

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js时间对象实践滚动时间

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;&lt;title&gt;hello world~!!&
复制链接

扫一扫

专栏目录