js倒计时

1、先添加一个js文件,把以下代码复制进去:(jquery.downCount)

(function ($) {
    var interval;
    $.fn.downCount = function (options, callback) {
        var settings = $.extend({
            date: null
        }, options);
        if (settings.date > 0) {
            if (!settings.date) { $.error('日期未定义'); }
            var container = this;
            var currentDate = function () {
                var date = new Date();
                var utc = date.getTime() + (date.getTimezoneOffset() * 60000);
                var new_date = new Date(utc + (3600000 * 8))
                return new_date;
            };
            var dateStr = convertDate(settings.date);
            function countdown() {
                var target_date = new Date(dateStr), // set target date
                    current_date = currentDate(); // get fixed current date

                // difference of dates
                var difference = target_date - current_date;

                // if difference is negative than it's pass the target date
                if (difference < 0) {
                    // stop timer
                    window.clearInterval(interval);
                    if (callback && typeof callback === 'function') callback();
                    return;
                }
                // basic math variables
                var _second = 1000,
                    _minute = _second * 60,
                    _hour = _minute * 60,
                    _day = _hour * 24;

                // calculate dates
                var days = Math.floor(difference / _day),
                    hours = Math.floor((difference % _day) / _hour),
                    minutes = Math.floor((difference % _hour) / _minute),
                    seconds = Math.floor((difference % _minute) / _second);

                // fix dates so that it will show two digets
                days = (String(days).length >= 2) ? days : '0' + days;
                hours = (String(hours).length >= 2) ? hours : '0' + hours;
                minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
                seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;

                // based on the date change the refrence wording
                var ref_days = (days === 1) ? 'day' : 'days',
                    ref_hours = (hours === 1) ? 'hour' : 'hours',
                    ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
                    ref_seconds = (seconds === 1) ? 'second' : 'seconds';

                // set to DOM
                container.find('.days').text(days);
                container.find('.hours').text(hours);
                container.find('.minutes').text(minutes);
                container.find('.seconds').text(seconds);

                container.find('.days_ref').text(ref_days);
                container.find('.hours_ref').text(ref_hours);
                container.find('.minutes_ref').text(ref_minutes);
                container.find('.seconds_ref').text(ref_seconds);
            };
            function convertDate(m) {
                Date.prototype.Format = function (fmt) {
                    var o = {
                        "M+": this.getMonth() + 1, //月份   
                        "d+": this.getDate(), //
                        "h+": this.getHours(), //小时   
                        "m+": this.getMinutes(), //
                        "s+": this.getSeconds(), //
                        "q+": Math.floor((this.getMonth() + 3) / 3), //季度   
                        "S": this.getMilliseconds() //毫秒   
                    };
                    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o)
                        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                    return fmt;
                }
                var myD = new Date();
                myD.setMinutes(myD.getMinutes() + parseInt(m), myD.getSeconds(), 0);
                return myD.Format("MM/dd/yyyy hh:mm:ss");
            }
            //开始倒计时
            interval = setInterval(countdown, 1000);
        }
        else {
            window.clearInterval(interval);
        }
    };
})(jQuery);
View Code

2、在需要倒计时的页面添加新建的js文件

3、使用方法,添加一段html

<ul class="countdown" id="timer">
    <li><span class="hours">00</span></li>
    <li class="seperator">:</li>
    <li><span class="minutes">00</span></li>
    <li class="seperator">:</li>
    <li><span class="seconds">00</span></li>
</ul>
View Code

4、调用方法

//倒计时
function downCountFun(time) {
    $('.countdown').downCount({ date: time }, function () {
        markingSub();//时间到后执行的函数
    });
}

5、注意!时间不支持小数点,{date:0}即time=0时停止倒计时

 

posted @ 2017-03-10 15:20  hllive  阅读(142)  评论(0编辑  收藏  举报