让人震惊的时间插件!

最近要实现一个倒计时的功能,想着网上有那么多轮子,就想直接用,于是乎,找到了这个插件:http://www.jq22.com/yanshi5456
但是人家收费啊,但是收费又怎能难倒一名前端开发的热情呢,于是乎,我在Network中和Sources中发现了蛛丝马迹,找到了原来使用的是downcount.js,本着程序员的代码开源精神我又找到了downcount.js的源码,源码最终出来的结果如下图。

让人震惊的时间插件!_第1张图片
image.png

但是又不太符合项目中倒计时的样式,于是乎,改改改,改成了支持以下的样式


时间倒计时.gif

本着开源精神的继承,源码给君双手奉上。源码是压缩后的,这里我做了格式的调整;此时,必须要说一个不是bug的bug,改完代码后美滋滋的我,突然发现,倒计时居然少了两个小时!震惊!于是乎,在代码中找啊找,想找到问题出在哪,楞是没找到,最后在设置代码传参的时候,发现居然传的是东十区的时间,太专业了,还有地理位置的时间差计算,我等自愧不如啊!

//jquery.downCount.js

(function ($) {
    $.fn.downCount = function (options, callback) {
        var settings = $.extend({ date: null, offset: null }, options); 
        if (!settings.date) { $.error('Date is not defined.'); }
        if (!Date.parse(settings.date)) { $.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.'); }
        var container = this; 
        var currentDate = function () {
            var date = new Date(); 
            var utc = date.getTime() + (date.getTimezoneOffset() * 60000); 
            var new_date = new Date(utc + (3600000 * settings.offset));
            return new_date;
        }; 
        function countdown() {
            var target_date = new Date(settings.date), current_date = currentDate(); 
            var difference = target_date - current_date;
            if (difference < 0) { clearInterval(interval); if (callback && typeof callback === 'function') callback(); return; }
            var _second = 1000, _minute = _second * 60, _hour = _minute * 60, _day = _hour * 24; 
            var days = Math.floor(difference / _day), hours = Math.floor((difference % _day) / _hour)+days*24, minutes = Math.floor((difference % _hour) / _minute), seconds = Math.floor((difference % _minute) / _second); 
            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;  
            container.find('.hours .hour_one').text(hours.toString().substr(0,1));
            container.find('.hours .hour_twe').text(hours.toString().substr(1,1));
            if(hours.toString().substr(2,1)!= '') container.find('.hours .hour_three').removeClass("none").text(hours.toString().substr(2,1));   
            container.find('.minutes .minutes_one').text(minutes.toString().substr(0,1));
            container.find('.minutes .minutes_twe').text(minutes.toString().substr(1,1));  
            container.find('.seconds .seconds_one').text(seconds.toString().substr(0,1));
            container.find('.seconds .seconds_twe').text(seconds.toString().substr(1,1));  
        }; 
        var interval = setInterval(countdown, 1000);
    };
})(jQuery);

调用

$('.countdown').downCount({
        date: '11/28/2019 24:00:00',
        offset: +8     // 传入地区的时间差
    }, function () {
        alert('活动已结束!');
    });

页面(类名是固定的)

               
  • 0 0 0
  • :
  • 0 0
  • :
  • 0 0

你可能感兴趣的:(让人震惊的时间插件!)