แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน
29 October 2010 By Ninenik Narkdeejquery countdown plugin
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery countdown plugin
ไปที่
Copy
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>
อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ
URL สำหรับอ้างอิง
Top
Copy