YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Downloads » CountDown – jQuery 促销倒计时插件

CountDown – jQuery 促销倒计时插件

程序简介:

CountDownjQuery 促销倒计时特效,是很多电子商务网站做促销活动时常用的一个效果,也是一个比较实用的效果。我用jQury写了这个countdown插件,希望对有需要的朋友有帮助。

(function(){
	// 调用方法
	$('#countdown-root').countdown([{
		endTime: "2012-09-23 12:01:00", // 结束时间
		isStart: true                   // 活动是否开始
	}, {
		endTime: "2012-08-23 12:01:00",
		isStart: true
	}, {
		endTime: "2013-09-23 12:01:00",
		isStart: true
	}, {
		endTime: "2013-10-01 12:01:00",
		isStart: false
	}]);
})();

下载地址:countdown.zip

程序特点

  1. 支持设置活动是否开始
  2. 支持批量配置,支持多个显示区域显示倒计时
  3. 图片数字切换,效果更好
  4. 浏览器兼容性好

程序 JavaScript 源代码:

/**
 * @author Yaohaixiao
 * @update 2012-09-20
 */
(function(){
	var getTimeImgHtml = function(num){
		var a = num.toString(10).split(''), l = a.length, r = [], i = 0;
		
		$(a).each(function(i, num){
			r.push('<strong class="n' + a[i] + '"> ' + a[i] + ' </strong>');
		});
		
		return r.join('');
	};
	
	// countdown 插件	
	$.fn.extend({
		countdown: function(config){
			var timer = null,   // 定时器
			    root = $(this), // 获得根节点
			    countBlocks = root.find('.countdown'), // 获得所有显示倒计时的 DOM 节点
                timeCount = null; // 显示计时内容函数

			timeCount = function(){
				// 如果有计时器,则释放资源
			    if (timer) {
				    clearTimeout(timer);
			    }
				
				// 循环(在每个 DOM 节点中显示计时数据)
				countBlocks.each(function(i, block){
					var curData = config[i].endTime, 
					    curIsStart = config[i].isStart, 
						curBlock = $(block),
						time = curData.split(' '), 
						dateVal = time[0].split('-'), 
						year = dateVal[0] * 1, 
						month = (dateVal[1] - 1) * 1, 
						date = dateVal[2] * 1, 
						hourVal = time[1].split(':'), 
						hour = hourVal[0] * 1, 
						minute = hourVal[1] * 1, 
						second = hourVal[2] * 1, 
						endTime = new Date(dateVal[0], month, date, hour, minute, second), 
						totalSeconds = (endTime - new Date()) / 1000, 
						countTime = null, 
						timeHTML = '', 
						days = 0, 
						hours = 0, 
						minutes = 0, 
						secounds = 0;
					
					// 活动结束
					if (parseInt(totalSeconds) <= 0) {
						curBlock.text('团购已经结束,可以继续购买!');
					}
					else {
					    // 活动开始
						// 计算剩余的时间
						days = parseInt(totalSeconds / 86400);
						hours = parseInt(totalSeconds % 86400 / 3600);
						minutes = parseInt((totalSeconds % 3600) / 60);
						seconds = parseInt((totalSeconds % 3600) % 60);
						
						// 时间为个位数时,显示 0 开头的两位数
						if (hours.toString().length === 1) {
							hours = '0' + hours;
						}
						if (minutes.toString().length === 1) {
							minutes = '0' + minutes;
						}
						if (seconds.toString().length === 1) {
							seconds = '0' + seconds;
						}
						
						// 获得剩余时间的 HTML 字符窜
						timeHTML = '<span>活动剩余时间:</span>' + getTimeImgHtml(days) + '<span>天</span>' + getTimeImgHtml(hours) + '<span>时</span>' + getTimeImgHtml(minutes) + '<span>分</span>' + getTimeImgHtml(seconds) + '<span>秒</span>';
						
						// (活动开始了)显示倒计时时间
						if (curIsStart) {
							curBlock.html(timeHTML);
						}
						else {
							// (活动未开始)显示提示信息
							curBlock.html('团购即将开始!');
						}
					}
				});
				
				// 创建计时器,每1秒刷新一次时间显示
				timer = setTimeout(timeCount, 1000);
			};
			
			// 执行计时函数
			timeCount();
		}
	});
})();

程序 CSS 源代码

/* ============== countdown.css ============== */
.countdown{margin:20px auto;width:300px;height:30px;line-height:30px;padding:5px;text-align:center;border:1px solid #CCC;background-color:#F4F4F4;overflow:hidden;}
.countdown strong{margin:5px 0;width:11px;height:20px;background:url(http://www.yaohaixiao.com/scripts/countdown/img/time.png) 0 0 no-repeat;text-indent:-9999px;overflow:hidden;}
.countdown span{padding:0 4px;height:30px;line-height:30px;overflow:hidden;}
.countdown strong,.countdown span{display:inline-block;}
.countdown strong.n1{background-position:0 3px;}
.countdown strong.n2{background-position:0 -18px;}
.countdown strong.n3{background-position:0 -40px;}
.countdown strong.n4{background-position:0 -60px;}
.countdown strong.n5{background-position:0 -80px;}
.countdown strong.n6{background-position:0 -100px;}
.countdown strong.n7{background-position:0 -120px;}
.countdown strong.n8{background-position:0 -140px;}
.countdown strong.n9{background-position:0 -160px;}
.countdown strong.n0{background-position:0 -180px;}

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:CountDown – jQuery 促销倒计时插件

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)