jQuery实现倒计时效果-杨秀徐

最新推荐文章于 2023-08-15 14:32:00 发布

qq_29069777

最新推荐文章于 2023-08-15 14:32:00 发布

阅读量244

点赞数 1

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

原文链接：https://www.mk2048.com/blog/blog.php?id=kkkjb2001cb&title=jQuery%E5%AE%9E%E7%8E%B0%E5%80%92%E8%AE%A1%E6%97%B6%E6%95%88%E6%9E%9C-%E6%9D%A8%E7%A7%80%E5%BE%90

版权

前端专栏收录该内容

1175 篇文章 1 订阅

订阅专栏

本实例效果：剩余368天22小时39分57秒结束

代码简单易懂，适用各种倒计时；

<!DOCTYPE html>
<head>
    <title>jQuery实现倒计时效果-杨秀徐</title>
    <script type="text/javascript" src="/scripts/jquery.js"></script>
    <script type="text/javascript">
        /*
        @作者：杨秀徐，主页 http://www.gzmsg.com
        @用途：jQuery实现倒计时效果$(".time").countDown({time: "2015/12/1 10:00:00",type:0})
        @参数：time: 结束时间,type:显示方式（0显示天数，1不显示天数）
        */
        $.fn.countDown = function (opt) {
            var opt = $.extend({
                time : null,
                type : 0
            }, opt);

            var edtime   = new Date(opt.time).getTime(),                  //月份是实际月份-1
	            edsecond = (edtime - new Date().getTime()) / 1000;  

            var eday    = $(this).find('.day'),
                ehour   = $(this).find('.hour'),
                eminute = $(this).find('.minute'),
                esecond = $(this).find('.second');

            var timer = setInterval(function () {
                if (edsecond > 1) {
                    edsecond -= 1;
                    var day = Math.floor((edsecond / 3600) / 24),
                    hour = Math.floor((edsecond / 3600) % 24),
                    minute = Math.floor((edsecond / 60) % 60),
                    second = Math.floor(edsecond % 60);
                    if(opt.type===0){
                        $(eday).text(day);                                  //计算天
                        $(ehour).text(hour < 10 ? "0"   hour : hour);       //计算小时
                    }else{
                        hour = day * 24;
                        $(ehour).text(hour < 10 ? "0"   hour : hour);       //计算小时-没有天数  
                    }
                    $(eminute).text(minute < 10 ? "0"   minute : minute);   //计算分钟
                    $(esecond).text(second < 10 ? "0"   second : second);   //计算秒杀
                } else {
                    clearInterval(timer);
                }
            }, 1000);
        }
        $(function () {
            $(".time").countDown({
                time: "2015/12/1 10:00:00",
                type:0
            });
        });
    </script>
</head>
<body>
    <div class="time">剩余<span class="day">0</span>天<span class="hour">00</span>小时<span class="minute">00</span>分<span class="second">00</span>秒结束</div>
</body>
</html>

更多专业前端知识，请上【猿2048】www.mk2048.com

qq_29069777

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现倒计时效果-杨秀徐

本实例效果：剩余368天22小时39分57秒结束代码简单易懂，适用各种倒计时； <!DOCTYPE html><head> <title>jQuery实现倒计时效果-杨秀徐</titl...
复制链接

扫一扫