JQuery----倒计时插件downCount

/*
* jQuery Form Plugin:jquery.downCount.js
* 倒计时插件
*
* author:  damys
* version: 1.1
* url:     https://github.com/damys/lab-js/tree/master/downCount
* Date:    2016/12
*/(function ($) {$.fn.downCount = function (options, callback) {var configs = $.extend({date: null,offset:8,     // 时区+8milliShow:0   // 是否显示毫秒 ， 注：较消耗内存， 不建议使用}, options);if (!configs.date) {$.error('Date is not defined.');}// 如果日期格式设置错误，抛出错误if (!Date.parse(configs.date)) {$.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');}var currentDate = function () {var date = new Date();// turn date to utcvar utc = date.getTime() + (date.getTimezoneOffset() * 60000);var new_date = new Date(utc + (3600000*configs.offset))return new_date;// 更新：location time// return new Date(date.getTime());};// 保存容器对象var container = this;// 倒计时function countdown () {var target_date = new Date(configs.date), // 设置目标日期current_date = currentDate();         // 获取静态当前日期// 计算不同日期var difference = target_date - current_date;// 当日期差小于0时，清除if (difference < 0) {// stop timerclearInterval(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),minutes = Math.floor((difference % _hour) / _minute),seconds = Math.floor((difference % _minute) / _second);// fix dates so that it will show two digetsdays = (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;// 当前时间类型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';// 设置DOM 时间数据container.find('.days').text(days);container.find('.hours').text(hours);container.find('.minutes').text(minutes);container.find('.seconds').text(seconds);// 设置DOM 时间类型数据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);}// 开始设置计数器：1秒调用1次var interval = setInterval(countdown, 1000);// 是否显示毫秒， 注：较消耗内存， 不建议使用if(configs.milliShow){var ref_Milliseconds = 0;function Millisecond() {ref_Milliseconds++;// 只显示两位if(ref_Milliseconds > 100){ref_Milliseconds = 0;return;}               container.find('.Milliseconds').text(ref_Milliseconds);}// 开始设置计数器， 1000分之1秒调用一次setInterval(Millisecond, 1);}};
})(jQuery);

使用：

$('.countdown').downCount({date: '2016/12/12',milliShow:!0
}, function () {console.log('倒计时结束!');
});

效果图：

JQuery----倒计时插件downCount相关推荐

jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互.下面向大家分享8个优秀的 jQuery倒计时插件和教程. jQu ...
html广告20s倒计时,简单时尚的jQuery倒计时插件
SyoTimer是一款简单时尚的jQuery倒计时插件.该计时器插件支持IE8+的现代浏览器,它的界面简洁,功能齐全.它的特点还有: 在计时器计时结束之后的回调函数中可以修改计时器的结构. 可以周期的 ...
漂亮实用的jQuery倒计时插件特效代码
原文:漂亮实用的jQuery倒计时插件特效代码源代码下载地址:http://www.zuidaima.com/share/1799598875675648.htm
基于jQuery倒计时插件实现团购秒杀效果
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的 ...
一款简单的Bootstrap和jQuery倒计时插件
下载地址一款简单漂亮的jQuery计时器插件.该计时器插件可以实现秒.分钟和小时的计时功能,并带有开始.暂停和重新开始计时的按钮功能. 该计时器插件的计时功能依赖于jquery-runner插件. ...
简易Jquery倒计时插件
引入jquery.leftTime.min.js.leftTime.css: 添加html: <td class="colspan-a"><span id=&qu ...
html5 倒计时插件,基于HTML5 time元素的倒计时jquery插件
这是一款简单的基于HTML5 time元素的倒计时jquery插件.该jquery倒计时插件提供默认的翻牌样式,可以在所有支持HTML5 time元素的浏览器中正常工作. 安装可以通过npm来安装j ...
jQuery自适应倒计时插件
jQuery自适应倒计时插件在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
jquery.countdown 倒计时插件的学习
1.第一种简单的使用第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...

JQuery----倒计时插件downCount

JQuery----倒计时插件downCount相关推荐

最新文章

热门文章