js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 日期时间

jQuery jCountdown 翻牌倒计时插件

发布时间:2015-08-27 21:53:17    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jQuery jCountdown 翻牌倒计时插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>jQuery jCountdown 翻牌倒计时插件</title>    
<script src="jquery/jquery-1.8.2.min.js"></script>    
<link href="jquery/jquery-ui-1.9.1.custom.min.css" rel="stylesheet" type="text/css">    
<script src="jquery/jquery-ui-1.9.1.custom.min.js"></script>    
<link href="jcountdown/jcountdown.css" rel="stylesheet" type="text/css">    
<script src="jcountdown/jquery.jcountdown.min.js"></script>    
<link href="index.css" rel="stylesheet" type="text/css">    
<script src="index.min.js"></script>    
</head>    
<body>    
<div id="tip">    
	<div class="arrow">    
	</div>    
	<div class="content">    
	</div>    
</div>    
<div id="content">    
	<div class="page">    
		<div class="countdown">    
		</div>    
		<div class="backgroundPicker" tip="check how it looks in different background color">    
			<div class="button black">    
			</div>    
			<div class="button white">    
			</div>    
			<div class="button blue">    
			</div>    
			<div class="button orange">    
			</div>    
			<div class="button red">    
			</div>    
		</div>    
		<ul class="panel">    
			<li>    
			<div class="group" tip="Year/Month/Date Hour:Minute:Second">    
				<div class="title">    
					Time Text</div>    
				<div class="content">    
					<input type="text" class="timeText" /></div>    
			</div>    
			<div class="group" tip="GMT number">    
				<div class="title">    
					Time Zone</div>    
				<div class="content">    
					<input type="text" class="timeZone" /></div>    
			</div>    
			</li>    
			<li>    
			<div class="group" tip="Flip, Slide, Metal or Crystal">    
				<div class="title">    
					Style</div>    
				<div class="content">    
					<div class="label">    
						<input type="radio" class="style" value="flip" /> Flip</div>    
					<div class="label">    
						<input type="radio" class="style" value="slide" /> Slide</div>    
				</div>    
				<div class="title">    
				</div>    
				<div class="content">    
					<div class="label">    
						<input type="radio" class="style" value="metal" /> Metal</div>    
					<div class="label">    
						<input type="radio" class="style" value="crystal" /> Crystal</div>    
				</div>    
			</div>    
			<div class="group" tip="Black or White, you can also modify the font, color and others in source psd file">    
				<div class="title">    
					Color</div>    
				<div class="content">    
					<div class="label">    
						<input type="radio" class="color" value="black" /> Black</div>    
					<div class="label">    
						<input type="radio" class="color" value="white" /> White</div>    
				</div>    
			</div>    
			</li>    
			<li tip="0~n (unlimited, default 0), if you don't want to resize it please set it to 0" class="new">    
			<div class="group">    
				<div class="title">    
					Width</div>    
				<div class="content">    
					<div class="label">    
						<input type="radio" class="widthType" value="auto" /> Auto</div>    
					<div class="label">    
						<input type="radio" class="widthType" value="fixed" /> Fixed</div>    
				</div>    
			</div>    
			<div class="group">    
				<div class="title">    
				</div>    
				<div class="content">    
					<div class="value">    
					</div>    
					<div class="slider width">    
					</div>    
				</div>    
			</div>    
			</li>    
			<li>    
			<div class="group" tip="0~n (unlimited, default 15)">    
				<div class="title">    
					Text Group Space</div>    
				<div class="content">    
					<div class="value">    
					</div>    
					<div class="slider textGroupSpace">    
					</div>    
				</div>    
			</div>    
			<div class="group" tip="0~n (unlimited, default 0)">    
				<div class="title">    
					Text Space</div>    
				<div class="content">    
					<div class="value">    
					</div>    
					<div class="slider textSpace">    
					</div>    
				</div>    
			</div>    
			</li>    
			<li>    
			<div class="group" tip="this setting works in Firefox, Chrome, Safari, Opera and most mobile browser">    
				<div class="title">    
					Reflection</div>    
				<div class="content">    
					<input type="checkbox" class="reflection" /></div>    
			</div>    
			<div class="group" tip="0~100 (default 10), this setting works in Firefox, Chrome, Safari, Opera and most mobile browser">    
				<div class="title">    
					Reflection Opacity</div>    
				<div class="content">    
					<div class="value">    
					</div>    
					<div class="slider reflectionOpacity">    
					</div>    
				</div>    
			</div>    
			<div class="group" tip="0~10 (default 0), this setting works in Firefox, Chrome and most mobile browser">    
				<div class="title">    
					Reflection Blur</div>    
				<div class="content">    
					<div class="value">    
					</div>    
					<div class="slider reflectionBlur">    
					</div>    
				</div>    
			</div>    
			</li>    
			<li tip="2~n (unlimited, default 2), you can set a large number, if you want to count a long time">    
			<div class="group">    
				<div class="title">    
					Day Text number</div>    
				<div class="content">    
					<div class="value">    
					</div>    
					<div class="slider dayTextNumber">    
					</div>    
				</div>    
			</div>    
			</li>    
			<li tip="you can hide some fields, if you only want to count a shot time">    
			<div class="group">    
				<div class="title">    
					Display Day</div>    
				<input type="checkbox" class="displayDay" /> </div>    
			<div class="group">    
				<div class="title">    
					Display Hour</div>    
				<input type="checkbox" class="displayHour" /> </div>    
			<div class="group">    
				<div class="title">    
					Display Minute</div>    
				<input type="checkbox" class="displayMinute" /> </div>    
			<div class="group">    
				<div class="title">    
					Display Second</div>    
				<input type="checkbox" class="displaySecond" /> </div>    
			</li>    
			<li tip="you can hide label, if you want to make it looks more concise" class="new">    
			<div class="group">    
				<div class="title">    
					Display Label</div>    
				<input type="checkbox" class="displayLabel" /> </div>    
			</li>    
			<li tip="you can execute some script when time's up, just pass a function when you create the countdown">    
			<div class="title">    
				On Finish Event</div>    
			</li>    
			<li tip="you can Start / Stop it by Javascript">    
			<div class="button stop">    
				Stop</div>    
			<div class="button start">    
				Start</div>    
			</li>    
			<li tip="you can Create / Destroy it by Javascript">    
			<div class="button destroy">    
				Destroy</div>    
			<div class="button create">    
				Create</div>    
			</li>    
		</ul>    
	</div>    
</div>    
</body>    
</html>



倒计时 翻牌

jQuery jCountdown 翻牌倒计时插件

倒计时404页面自动跳转代码

jQuery实现手机发送验证码倒计时特效代码

html5 css3圆形进度条倒计时页面跳转代码

js点击按钮倒计时30秒发送手机验证码特效代码

友荐云推荐
大家说 此评论不代表本站观点