แนะนำ การประยุกต์ ใช้งาน jQuery Countdown นับเวลาถอยหลัง
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeecountdown jquery
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ countdown jquery
ไปที่
Copy
ตัวอย่างและโค้ดต่อไปนี้ เป็นแนวทางอย่างง่ายในการใช้งาน jquery countdown
เพื่อนับเวลาถอยหลัง ก่อนถึงจุดเวลาที่กำหนด อาจจะเคยเห็นได้จาก
รายการที่มีการจัดโปรโมชั่น หรือกิจกรรมที่มีกำหนดเวลา ต้องการแสดงเวลากำกับ
แบบนี้เป็นต้น
สามารถเข้าไปดูวิธีใช้านทั้งหมดได้ที่
หากต้องการประยุกต์ตามตัวอย่างด้านล่าง ดาวน์โหลดไฟล์ แล้วเก็บ 2 ไฟล์นี้ไว้ใช้งาน
jquery.plugin.min.js
jquery.countdown.min.js
ตัวอย่างการประยุกต์ใช้งาน
จะแสดงให้เห็นถึงการนับถอยหลังเวลา จนครบกำหนดของส่วนแสดง พร้อมๆ กันทั้ง
สี่รายการ
ตัวอย่างโค้ดสำหรับการประยุตก์ใช้งาน
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <br><br> <div style="margin:auto;width:80%;"> <div id="time1"></div> <div id="time2"></div> <div id="time3"></div> <div id="time4"></div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/jquery.plugin.min.js"></script> <script src="js/jquery.countdown.min.js"></script> <script type="text/javascript"> $(function(){ var opt={ labels: ['Years', 'Months', 'Weeks', 'Days', ':', ':', ''], labels1: ['Years', 'Months', 'Weeks', 'Days', ':', ':', ''], whichLabels: null, padZeroes: true, timeSeparator: ':', format: 'HMS', } $("#time1").countdown($.extend(opt,{ until: new Date('<?=date("Y-m-d H:i:s",strtotime("+2 minute"))?>'), })); $("#time2").countdown($.extend(opt,{ until: new Date('<?=date("Y-m-d H:i:s",strtotime("+1 hour +5 minute +28 second"))?>'), })); $("#time3").countdown($.extend(opt,{ until: new Date('<?=date("Y-m-d H:i:s",strtotime("+30 minute +11 second"))?>'), })); $("#time4").countdown($.extend(opt,{ until: new Date('<?=date("Y-m-d H:i:s",strtotime("+2 hour"))?>'), })); }); </script> </body> </html>
หากใช้กับข้อมูลจากฐานข้อมูล เช่น สมมติเวลาวันที่และเวลาสิ้นสุดคือ
อยู่ในรูปแบบ 2014-11-30 11:13:30
เมื่อเราดึงจากฐานข้อมูลได้เป็นตัวแปร $rs['datetime_end']
เวลานำไปใช้งานก็ได้ว่า
var opt={ labels: ['Years', 'Months', 'Weeks', 'Days', ':', ':', ''], labels1: ['Years', 'Months', 'Weeks', 'Days', ':', ':', ''], whichLabels: null, padZeroes: true, timeSeparator: ':', format: 'HMS', } $("#time1").countdown($.extend(opt,{ until: new Date('<?=$rs['datetime_end']?>'), }));
หรือหากต้องการบวกเพิ่มจากเวลาในฐานข้อมูล ก็สามารถทำได้เป็น
var opt={ labels: ['Years', 'Months', 'Weeks', 'Days', ':', ':', ''], labels1: ['Years', 'Months', 'Weeks', 'Days', ':', ':', ''], whichLabels: null, padZeroes: true, timeSeparator: ':', format: 'HMS', } $("#time1").countdown($.extend(opt,{ until: new Date('<?=date("Y-m-d H:i:s",strtotime($rs['datetime_end']." +1 hour +5 minute +28 second"))?>'), }));
ขอยกวิธีใช้งานแบบรวบรัด มาแปะไว้ที่เว็บ
$(selector).countdown({ labels: ['Years', 'Months', 'Weeks', 'Days', 'Hours', 'Minutes', 'Seconds'], // The expanded texts for the counters labels1: ['Year', 'Month', 'Week', 'Day', 'Hour', 'Minute', 'Second'], // The display texts for the counters if only one compactLabels: ['y', 'm', 'w', 'd'], // The compact texts for the counters whichLabels: null, // Function to determine which labels to use digits: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], // The digits to display timeSeparator: ':', // Separator for time periods isRTL: false, // True for right-to-left languages, false for left-to-right until: null, // new Date(year, mth - 1, day, hr, min, sec) - date/time to count down to // or numeric for seconds offset, or string for unit offset(s): // 'Y' years, 'O' months, 'W' weeks, 'D' days, 'H' hours, 'M' minutes, 'S' seconds since: null, // new Date(year, mth - 1, day, hr, min, sec) - date/time to count up from // or numeric for seconds offset, or string for unit offset(s): // 'Y' years, 'O' months, 'W' weeks, 'D' days, 'H' hours, 'M' minutes, 'S' seconds timezone: null, // The timezone (hours or minutes from GMT) for the target times, // or null for client local serverSync: null, // A function to retrieve the current server time for synchronisation format: 'dHMS', // Format for display - upper case for always, lower case only if non-zero, // 'Y' years, 'O' months, 'W' weeks, 'D' days, 'H' hours, 'M' minutes, 'S' seconds layout: '', // Build your own layout for the countdown compact: false, // True to display in a compact format, false for an expanded one padZeroes: false, // True to add leading zeroes significant: 0, // The number of periods with values to show, zero for all description: '', // The description displayed for the countdown expiryUrl: null, // A URL to load upon expiry, replacing the current page alwaysExpire: false, // True to trigger onExpiry even if never counted down onExpiry: null, // Callback when the countdown expires - // receives no parameters and 'this' is the containing division onTick: null, // Callback when the countdown is updated - // receives int[7] being the breakdown by period (based on format) // and 'this' is the containing division tickInterval: 1 // Interval (seconds) between onTick callbacks }); $.countdown.regionalOptions[] // Language/country-specific localisations $.countdown.setDefaults(settings) // Set global defaults $.countdown.UTCDate(tz, time) // Standardise a date to UTC format $.countdown.UTCDate(tz, year, month, day, hours, mins, secs, ms) $.countdown.periodsToSeconds(periods) // Convert periods into equivalent seconds $(selector).countdown('option', options) // Change instance settings $(selector).countdown('option', name, value) // Change a single instance setting $(selector).countdown('option', name) // Retrieve instance settings $(selector).countdown('destroy') // Remove countdown functionality $(selector).countdown('pause') // Stop the countdown but don't clear it $(selector).countdown('lap') // Stop the display but continue the countdown $(selector).countdown('resume') // Restart a paused or lap countdown $(selector).countdown('toggle') // Toggle between pause/resume $(selector).countdown('toggleLap') // Toggle between lap/resume $(selector).countdown('getTimes') // Retrieve the current time periods
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก
กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ
ยังไม่เป็นสมาชิก
สมาชิกล็อกอิน
สมาชิกล็อกอิน
( หรือ เข้าใช้งานผ่าน Social Login )
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()