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>
