使用jQuery开发一个超酷的倒计时效果

最新推荐文章于 2023-02-27 08:54:02 发布

thegeek

最新推荐文章于 2023-02-27 08:54:02 发布

阅读量552

点赞数

分类专栏： gbin1 jquery 文章标签： jquery class date function callback div

jquery 同时被 2 个专栏收录

233 篇文章

订阅专栏

gbin1

92 篇文章

订阅专栏

本文介绍了一款基于jQuery的倒计时插件，通过简单的HTML结构和jQuery代码即可实现炫酷的倒计时效果。该插件适用于各种Web项目，并提供了一个示例代码展示如何设置特定日期的倒计时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在线演示在线下载

今天我们分享一篇来自tutorialzine的教程，本文将使用jQuery开发一个超酷的倒计时效果插件，使用这个插件你可以生成一个非常炫的倒计时器，你可以方便的整合到你需要的web功能模块中，希望大家喜欢！

<div id="countdown" class="countdownHolder">
	<span class="countDays">
		<span class="position">
			<span class="digit static"></span>
		</span>
		<span class="position">
			<span class="digit static"></span>
		</span>
	</span>

	<span class="countDiv countDiv0"></span>

	<span class="countHours">
		<span class="position">
			<span class="digit static"></span>
		</span>
		<span class="position">
			<span class="digit static"></span>
		</span>
	</span>

	<span class="countDiv countDiv1"></span>

	<span class="countMinutes">
		<span class="position">
			<span class="digit static"></span>
		</span>
		<span class="position">
			<span class="digit static"></span>
		</span>
	</span>

	<span class="countDiv countDiv2"></span>

	<span class="countSeconds">
		<span class="position">
			<span class="digit static"></span>
		</span>
		<span class="position">
			<span class="digit static"></span>
		</span>
	</span>

	<span class="countDiv countDiv3"></span>
</div>

以下代码将演示如何调用上述插件：

$(function(){

	var note = $('#note'),
		ts = new Date(2012, 0, 1),
		newYear = true;

	if((new Date()) > ts){
		// The new year is here! Count towards something else.
		// Notice the *1000 at the end - time must be in milliseconds
		ts = (new Date()).getTime() + 10*24*60*60*1000;
		newYear = false;
	}

	$('#countdown').countdown({
		timestamp	: ts,
		callback	: function(days, hours, minutes, seconds){

			var message = "";

			message += days + " day" + ( days==1 ? '':'s' ) + ", ";
			message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
			message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
			message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";

			if(newYear){
				message += "left until the new year!";
			}
			else {
				message += "left to 10 days from now!";
			}

			note.html(message);
		}
	});

});

代码书写完毕！