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

时间：2022-01-08 22:04:53

本实例效果：剩余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>

 

标签：

相关文章