jCountdown使用 – 可乐吧

来源: jCountdown使用 – 可乐吧

目前版本为:jCountdown JQuery Plugin – v1.5.2 – 2014-07-29
下载地址:https://github.com/tomgrohl/jCountdown/
这个插件使用比较简单,难得的是一个版本一个版本在不断做着升级优化。非常符合我选择插件的要求。
介绍下如何使用:
1、引用JQuery.jcountdown.js文件。
2、html里面添加给要显示倒计时的区域添加id名。例:

3、调用,填写相应参数。

$(document).ready(function() {
 
	$("#countdown").countdown({
		date: "August 15, 2014 09:59",
		omitZero: false,//省略0
		//minsOnly: true,
		leadingZero: false, //前导0
		//yearsAndMonths: true, //年月
		//weeks: true //周
	});
 
});

由于为外国人开发所显示的为日期名称为英文,还好有参数,方便修改。另一例调用方法,如下。

	// 倒计时
	var dateTo = "August 15, 2014 00:00"
	$("#time").countdown({
		yearText: '年',
		monthText: '月',
		weekText: '周',
		dayText: '天',
		hourText: '时',
		minText: '分',
		secText: '秒',
		yearSingularText: '年',
		monthSingularText: '月',
		weekSingularText: '周',
		daySingularText: '天',
		hourSingularText: '时',
		minSingularText: '分',
		secSingularText: '秒',
		date: dateTo,
		omitZero: false
	});

在这个过程中,产品有个需求是去掉“秒”的展示,通过简易模板配置可以完成。代码如下:

$(document).ready(function() {
 
	// Tokens available: %y = years, %m = months, %w = weeks, %d = days, %h = hours, %i = minutes, %s = seconds
 
	$("#countdown").countdown({
		date: "september 10, 2015 12:35",
        //yearsAndMonths: true,
		template: '%d %h %i'
	});
 
});

ps:此插件支持一个页面有多个倒计时存在。还包含了一些方法,请查看示例。

设置时间时不能设为24:00,否则在chrome下会出现:Uncought Error:Invalid Date passer to jCountdown

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏