jQuery Countdown插件

一时失言乱红尘 2023-02-21 15:28 13阅读 0赞

You've probably been to sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. I've created a similar script but my script allows you to animate the CSS font-size of each second and present a reward at the end.

您可能去过RapidShare和MegaUpload等网站，这些网站可以下载文件，但需要等待指定的秒数才能提供下载链接。 我创建了一个类似的脚本，但是我的脚本允许您动画化每秒CSS 字体大小 ，并在最后给出奖励。

[View Demo][] [查看演示][View Demo] [Download][] [下载][Download]

## jQuery JavaScript **(**The jQuery JavaScript**)** ##

jQuery.fn.countDown = function(settings,to) {
    	settings = jQuery.extend({
    		startFontSize: "36px",
    		endFontSize: "12px",
    		duration: 1000,
    		startNumber: 10,
    		endNumber: 0,
    		callBack: function() { }
    	}, settings);
    	return this.each(function() {
    		
    		//where do we start?
    		if(!to && to != settings.endNumber) { to = settings.startNumber; }
    		
    		//set the countdown to the starting number
    		jQuery(this).text(to).css("fontSize",settings.startFontSize);
    		
    		//loopage
    		jQuery(this).animate({
    			fontSize: settings.endFontSize
    		}, settings.duration, "", function() {
    			if(to > settings.endNumber + 1) {
    				jQuery(this).css("fontSize", settings.startFontSize).text(to - 1).countDown(settings, to - 1);
    			}
    			else {
    				settings.callBack(this);
    			}
    		});
    				
    	});
    };

## 样品用量 **(**Sample Usage**)** ##

jQuery("#countdown").countDown({
    	startNumber: 10,
    	callBack: function(me) {
    		jQuery(me).text("All done! This is where you give the reward!").css("color", "#090");
    	}
    });

The script is very customizable and the settings are self-explanatory.

该脚本是非常可定制的，并且设置是不言自明的。

[View Demo][] [查看演示][View Demo] [Download][] [下载][Download]

Check out the [MooTools version][].

查看[MooTools版本][MooTools version] 。

> 翻译自: [https://davidwalsh.name/jquery-countdown-plugin][https_davidwalsh.name_jquery-countdown-plugin]

[View Demo]: https://davidwalsh.name/demo/jquery-countdown.php
[Download]: https://davidwalsh.name/demo/jquery.countDown.js
[MooTools version]: https://davidwalsh.name/mootools-countdown-plugin
[https_davidwalsh.name_jquery-countdown-plugin]: https://davidwalsh.name/jquery-countdown-plugin