แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน
เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdeeplugin countdown jquery
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ plugin countdown jquery
ไปที่
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
ขอบคุณทุกการสนับสนุน
![]()