关于方块倒计时功能

开发工具与关键技术:VS   后端

作者:陈芝番                                                                           

撰写时间:2019.6.17                          

1.首先说的是关于方块倒计时功能,通过html编程,然后在通过Javascript对html中id类进行功能的操作。该功能就是从某年某月某日到某年某月某日还有多长时间,通过计算出还有多长时间,这样就可以清晰的知道从某年某月某日到某年某月某日还有多长时间。

2.通过Timecountdown计算,由startTime-àfinish获取某一时间段,通过

a.days = Math.floor(l / d);

   a.year = Math.floor(a.days / 365);

a.day = Math.floor(a.days % 365);

a.hour = Math.floor(l % d / c);

a.minute = Math.floor((l - (a.days * d + a.hour * c)) / b);

a.second = Math.floor(l % (b));

 3. * time.day 和 time.dayZero 区别    

 * time.day 如果是1天 返回 1

     * time.dayZero 如果是1天 则返回 01

     * 除了day拥有Zero外 hour,minute,second,msec都有Zero 即小于10的,都会在前面补0

Javascript部分:

<script type="text/javascript">

    window.onload=function(){

        xcsoft.countdown('2022-5-11',function (time) {

            //time.days=总天数

            document.getElementById("y1").innerHTML=time.year

            document.getElementById("d1").innerHTML=time.day

            document.getElementById("h1").innerHTML=time.hourZero

            document.getElementById("i1").innerHTML=time.minuteZero

            document.getElementById("s1").innerHTML=time.secondZero

            document.getElementById("m1").innerHTML=time.msecZero

        },function (time) {

        //倒计时结束后的操作

        })

        xcsoft.countup('2019-5-18',function (time) {

            document.getElementById("y2").innerHTML=time.year

            document.getElementById("d2").innerHTML=time.day

            document.getElementById("h2").innerHTML=time.hourZero

            document.getElementById("i2").innerHTML=time.minuteZero

            document.getElementById("s2").innerHTML=time.secondZero

        })

        var nes=parseInt(new Date().getTime()/1000)+60;

        xcsoft.countdown(parseInt(nes)+'.3',function (time) {

            document.getElementById("s3").innerHTML=time.secondZero

            document.getElementById("m3").innerHTML=time.msecZero

        })

    }

</script>

效果功能展示如下:

结语:主要说关于方块倒计时功能的如何实现,运用的知识点有Javascripthtml部分,通过startTime-àfinish某一时间段计算出所要的结果。

猜你喜欢

转载自blog.csdn.net/qq_44554890/article/details/92636599
今日推荐