码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-11-27 12:14:24      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   sp   java   on   div   

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

 

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

标签:style   blog   http   io   ar   sp   java   on   div   

原文地址:http://www.cnblogs.com/sntetwt/p/4125958.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!