PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน

29 October 2010 By


CountDown jQuery plugin ดูรายละเอียดและวิธีการใช้ได้ด้วยตัวเองที่
http://www.littlewebthings.com/projects/countdown/index.php

ดาวน์โหลดไฟล์ตัวอย่าง ได้ที่ http://www.littlewebthings.com/projects/countdown/downloads/lwtCountdown-html.zip

ตัวอย่าง นับถอยหลังก่อนวันขึ้นปีใหม่ 1 มกราคา 2555

weeks
0
0
days
0
0
hours
0
0
minutes
0
0
seconds
0
0

โค้ด ส่วนสำหรับใช้งานทั้งหมด
 

<!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>cool countdown</title>

<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
}

body {
	text-align: center;
}

#container_counter {
	margin: 50px auto;
	width: 700px;
	color: #555;
}

#countdown_dashboard {
	height: 110px;
}

.dash {
	width: 110px;
	height: 114px;
	background: transparent url('lwtcountdown/images/dash.png') 0 0 no-repeat;
	float: left;
	margin-left: 20px;
	position: relative;
}

.dash .digit {
	font-size: 55pt;
	font-weight: bold;
	float: left;
	width: 55px;
	text-align: center;
	font-family: Times;
	color: #555;
	position: relative;
}

.dash_title {
	position: absolute;
	display: block;
	bottom: 0px;
	right: 6px;
	font-size: 9pt;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 2px;
}

</style>
</head>

<body>


	
<div id="container_counter">

		<!-- Countdown dashboard start -->
		<div id="countdown_dashboard">
			<div class="dash weeks_dash">
				<span class="dash_title">weeks</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

			<div class="dash days_dash">
				<span class="dash_title">days</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

			<div class="dash hours_dash">
				<span class="dash_title">hours</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

			<div class="dash minutes_dash">
				<span class="dash_title">minutes</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

			<div class="dash seconds_dash">
				<span class="dash_title">seconds</span>
				<div class="digit">0</div>
				<div class="digit">0</div>
			</div>

		</div>
		<!-- Countdown dashboard end -->
        
</div>      
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://www.littlewebthings.com/projects/countdown/demo/js/jquery.lwtCountdown-1.0.js"></script>
<script type="text/javascript">
$(function(){
	$('#countdown_dashboard').countDown({
		targetDate: {
			'day': 		1,
			'month': 	1,
			'year': 	2012,
			'hour': 	0,
			'min': 		0,
			'sec': 		0
			// time set as UTC
			//'utc':      true				
		},
		// onComplete function
		onComplete: function(){ 
		
		}			
	});
});
	

// กำหนดการนับถอยหลังจากวันที่ ที่กำหนดโดยตรง
function set_by_date() {
	$('#countdown_dashboard').stopCountDown();
	$('#countdown_dashboard').setCountDown({
		targetDate: {
			'day': 		15,
			'month': 	1,
			'year': 	2011,
			'hour': 	12,
			'min': 		0,
			'sec': 		0
		}
	});
	$('#countdown_dashboard').startCountDown();
}

// Set by date/time offset
function set_by_offset() {
//		หากไม่ต้องการแสดง สัปดาห์ week ในการกำหนด 
//		targetOffset ให้กำหนด day และ month เท่ากับ 0 
	$('#countdown_dashboard').stopCountDown();
	$('#countdown_dashboard').setCountDown({
		targetOffset: {
			'day': 		1,
			'month': 	1,
			'year': 	0,
			'hour': 	1,
			'min': 		1,
			'sec': 		1
		}
	});
	$('#countdown_dashboard').startCountDown();
}	
	
// Stop countdown
function stop() {
	$('#countdown_dashboard').stopCountDown();
}

// Start countdown
function start() {
	$('#countdown_dashboard').startCountDown();
}

// reset and start
function reset() {
	$('#countdown_dashboard').stopCountDown();
	$('#countdown_dashboard').setCountDown({
		targetOffset: {
			'day': 		1,
			'month': 	1,
			'year': 	0,
			'hour': 	1,
			'min': 		1,
			'sec': 		1
		}
	});				
	$('#countdown_dashboard').startCountDown();
}
	
</script>

</body>
</html>

 


Tags:: countdown plugin jquery





URL สำหรับอ้างอิง