购物网站中商品活动倒计时js

最新推荐文章于 2024-05-13 04:15:45 发布

nzstjhk

最新推荐文章于 2024-05-13 04:15:45 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：封装文章标签：倒计时 js封装封装函数的调用 js

本文链接：https://blog.youkuaiyun.com/weixin_42598901/article/details/80914634

封装专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在购物网站中实现商品活动的倒计时功能，通过JS封装函数实现，详细展示了HTML代码和倒计时效果，提供了一种3天06小时09分钟34秒的倒计时展示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html中代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="count-time">
        <span class="tis1"></span>
        <span class="tis2">天</span>
        <span class="tis3"></span>
        <span class="tis4">时</span>
        <span class="tis5"></span>
        <span class="tis6">分</span>
        <span class="tis7"></span>
        <span class="tis8">秒</span>
    </div>
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="js/chacha.js"></script>
    <script>
        window.setInterval(function(){ 
            $(".count-time").countDown('2018/07/07 24:00:00');
      }, 1000); 
    </script>
</body>
</html>

封装的js代码

;(function($){
$.fn.extend({
    countDown:function(endTime){
        //取设定的活动结束时间距1970年1月1日之间的毫秒数
        var end=new Date(endTime).getTime();
        //取当前时间距1970年1月1日之间的毫秒数
        var nowTime=new Date().getTime();
        //结束时间与当前时间之间的毫秒差
        var difference=end-nowTime;
        if (difference>0) {
            //将毫秒差换算成天数
            days=Math.floor(difference/86400000);
            difference=difference-days*86400000;
            //换算成小时
            hours=Math.floor(difference/3600000);
            difference=difference-hours*3600000;
            //换算成分钟
            minutes=Math.floor(difference/60000);
            difference=difference-minutes*60000;
            //换算成秒数
            seconds=Math.floor(difference/1000);
           //不足10时，进行补零操作
            if(hours<10){
                hours="0"+hours;
            };
            if(minutes<10){
                minutes="0"+minutes;
            };
            if(seconds<10){
                seconds="0"+seconds;
            };
            $(".tis1").html(days);
            $(".tis3").html(hours);
            $(".tis5").html(minutes);
            $(".tis7").html(seconds);   
        } else {
            //设定若是过了设置的活动结束时间，全部写成0天0时0分0秒
            $(".tis1").html(0);
            $(".tis3").html(0);
            $(".tis5").html(0);
            $(".tis7").html(0);  
        }
       }  
})
})(jQuery);

大概效果呈现

3天06时09分34秒