jQuery动态倒计时(倒数插件)Demo

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的超酷倒计时、倒数插件</title>
<style type="text/css">
@media all{*{margin:0; padding:0;} html{overflow-y:scroll;}body{font-family:'lucida grande',tahoma,verdana,arial,sans-serif; font-size:62.5%; color:#222;}.center{width:1000px; margin:0 auto;}#page{}#content{background:#fff; padding:10px 0 10px 0;}#content-left{width:700px; margin:0 20px 0 0; float:left;}#content-right{width:280px; float:left;}#content-right a{float:left; padding-right:10px; display:block; width:125px; height:125px;}#footer{background:#eee; border-top:1px solid #ccc; padding:10px 0;}#footer1, #footer2, #footer3{width:300px; float:left; margin:0 30px 0 0;}#footer3{width:330px; margin-right:0;}abbr{border-bottom:1px dotted #ccc; cursor:help;}blockquote{background:#eee; margin:0 20px; padding:10px 20px;}code{font-family:'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;}h1{font-size:4.3em; margin:0 0 20px 0;}h2{font-size:2.8em;}h1, h2, h3, h6{font-weight:normal; font-family:"Droid Serif",Cambria,Georgia,Palatino,"Palatino Linotype","Myriad Pro",Serif;}h3, h6{font-size:2em;}h6{padding:0 0 5px 0;}label,select,input[type='submit'],.point{cursor:pointer;}li{}li,p{line-height:19px; margin-top:5px;}ol, ul{padding:0 0 10px 35px;}p{margin:5px 0 14px 0; font-size:1.2em; line-height:1.8em;}textarea,input[type='text'], input[type='email'], input[type='password']{border:1px solid #ccc; padding:5px; font-size:120%; font-family:'lucida grande',tahoma,verdana,arial,sans-serif;}.clear{clear:both;}.exhead{background:#e8f0f6; border-top:1px solid #fff; color:#000; padding:10px 10px; font-size:120%;}.exhead a{color:#6D84B4;}.intro{background:#ffd987; font-style:italic; padding:5px 10px; margin-bottom:20px;}.relative{position:relative;}a{color:#3b5998;}a:link, a:visited{text-decoration:underline;}a:hover, a:active{text-decoration:none;}a img{border:0;}}
</style>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
		$(document).ready(function() {
			jQuery.fn.delay = function(time,func){
				return this.each(function(){
					setTimeout(func,time);
				});
			};
			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() {
					if(!to && to != settings.endNumber) { to = settings.startNumber; }
					$(this).text(to).css('fontSize',settings.startFontSize);
					$(this).animate({
						'fontSize': settings.endFontSize
					},settings.duration,'',function() {
						if(to > settings.endNumber + 1) {
							$(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
						}
						else
						{
							settings.callBack(this);
						}
					});
							
				});
			};
			$('#countdown').countDown({
				startNumber: 10,
				callBack: function(me) {
					$(me).text('All done! This is where you give the reward!').css('color','#090');
				}
			});
			
		});
	</script>
</head>
<body>
<div id="content"><div class="center">
	<div id="content-left">
		<h1 style="margin-top:20px;">jQuery CountDown Plugin Example</h1>	
	<p>
		<span id="countdown"></span>
	</p>
</div>
<div class="clear"></div>
</div></div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jQuery动态倒计时(倒数插件)Demo

分类

日期时间

描述

jQuery CountDown Plugin Example jQuery倒计时插件实例，风格简洁的倒计时特效，初步设定数字由9——0变化，每次变化都有从大到小的动态效果，也可以看作是倒数插件，把一组数字按倒序显示出来，jQuery配合JavaScript实现的效果。