jQuery 写商城活动倒计时 js

最新推荐文章于 2022-12-28 11:22:32 发布

前端菜鸟--LKX

最新推荐文章于 2022-12-28 11:22:32 发布

阅读量144

点赞数

分类专栏： JavaScript 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/lkx_20201106/article/details/115533400

版权

JavaScript 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

html部分

    <div>
        <span class="day">00</span>
        <span>:</span>
        <span class="house">00</span>
        <span>:</span>
        <span class="minute">00</span>
        <span>:</span>
        <span class="secends">00</span>
    </div>

div{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80vh;
    }
span{
     font-size: 20px;
     margin: 5px;
    }

js部分

    <script>
        function downTime(endTime){
            var nowTime = new Date().getTime();
            var difference = endTime - nowTime;
            var day = Math.floor(difference/(1000*60*60*24));
            day = day < 10 ? `0${day}天`: `${day}天`;
            var house = Math.floor(difference/(1000*60*60)%24);
            house = house < 10 ? "0" + house + "时": house + "时";
            var minute = Math.floor(difference/(1000*60)%60);
            minute = minute < 10 ? "0" + minute + "分": minute + "分";
            var seconds = Math.floor((difference/1000)%60);
            seconds = seconds < 10 ? "0" + seconds + "秒": seconds + "秒";
            $(".day").text(day);
            $(".house").text(house);
            $(".minute").text(minute);
            $(".secends").text(seconds);

        }

        var setTime = 1618068360000
        var interval = setInterval(()=>{
            downTime(setTime)
            if(setTime - new Date().getTime() < 1000 ){
                clearInterval(interval);
                $(".day").text("00");
                $(".house").text("00");
                $(".minute").text("00");
                $(".secends").text("00");
            }
        },1000)
        
    </script>