แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน
29 October 2010CountDown 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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
24 Feb 11 ยืนยันการเปลี่ยนแปลงข้อมูลใน select option ด้วย javascript อย่างง่าย อ่าน 2530 09 Oct 09 ขยายขนาดความสูงของ iframe ตามความสูงของเพจที่แสดง ด้วย jQuery อ่าน 4123 09 Sep 10 Google map API v.3 กับ jQuery ลากจุดหา พิกัด ค่า latitude และ longitude อ่าน 8379 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Attribute อ่าน 3797 25 Sep 08 การกำหนด Selectors ด้วย jquery แบบ Basic อ่าน 4591 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2806 21 Oct 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อนขึ้น เลื่อนลง คล้าย marquee แนวตั้ง อ่าน 2860 07 Sep 10 ใช้ ckeditor กับ filemanager ด้วย php รองรับ ฟังก์ชัน javascript อ่าน 4036 02 Jun 10 การหา ขนาด ความกว้าง ความสูงของ รูปภาพ ด้วย javascript อ่าน 2551 03 Nov 08 เก็บ HTML ไว้ในตัวแปร PHP อย่างง่ายด้วยฟังก์ชัน ob_start() อ่าน 3386 19 Apr 10 สอน jQuery เพิ่มรูปภาพ ให้ตัวเลือก ใน listbox อ่าน 5215 14 Oct 11 การเชื่อมต่อ facebook และ ล็อกอิน แบบ popup ด้วย php sdk v.3.1.1 อ่าน 2315 20 Dec 09 ประยุกต์การทำ overlay เพจ กับกล่องข้อความ ด้วย jQuery อ่าน 5326 29 Sep 10 แนวทาง การสร้าง ระบบตรวจสอบ การล็อกอิน อย่างง่าย ด้วย ajax ใน jQuery และ php อ่าน 5046 20 Mar 11 กำหนด รายละเอียด การใช้งาน facebook login button เพิ่มเติม อ่าน 2602 22 Oct 08 คำสั่ง SQL GROUP BY อ่าน 7220 14 Jan 10 รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบาย อ่าน 7663 26 Feb 09 สร้างแบบฟอร์มค้นหาข้อมูลในเว็บไซต์ ด้วย Google อ่าน 4015 07 Oct 10 การใช้ php sdk เรียกใช้งาน graph api ใน facebook แบบระบุส่วนของข้อมูล อ่าน 2926 11 Feb 11 แนะนำ การใช้งาน jQuery quicksearch plugin อ่าน 3861