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

29 October 2010 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

jquery plugin countdown

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery plugin countdown

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

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

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

weeks

days

hours

minutes

seconds

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

<!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>

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

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

เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ