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);
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>
4、调用方法
//倒计时 function downCountFun(time) { $('.countdown').downCount({ date: time }, function () { markingSub();//时间到后执行的函数 }); }
5、注意!时间不支持小数点,{date:0}即time=0时停止倒计时