ตัวอย่างและโค้ดต่อไปนี้ เป็นแนวทางอย่างง่ายในการใช้งาน jquery countdown
เพื่อนับเวลาถอยหลัง ก่อนถึงจุดเวลาที่กำหนด อาจจะเคยเห็นได้จาก
รายการที่มีการจัดโปรโมชั่น หรือกิจกรรมที่มีกำหนดเวลา ต้องการแสดงเวลากำกับ
แบบนี้เป็นต้น
สามารถเข้าไปดูวิธีใช้านทั้งหมดได้ที่
หากต้องการประยุกต์ตามตัวอย่างด้านล่าง ดาวน์โหลดไฟล์ แล้วเก็บ 2 ไฟล์นี้ไว้ใช้งาน
jquery.plugin.min.js
jquery.countdown.min.js
ตัวอย่างการประยุกต์ใช้งาน
จะแสดงให้เห็นถึงการนับถอยหลังเวลา จนครบกำหนดของส่วนแสดง พร้อมๆ กันทั้ง
สี่รายการ
ตัวอย่างโค้ดสำหรับการประยุตก์ใช้งาน
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!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']
เวลานำไปใช้งานก็ได้ว่า
1 2 3 4 5 6 7 8 9 10 11 12 | 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 ']?>' ), })); |
หรือหากต้องการบวกเพิ่มจากเวลาในฐานข้อมูล ก็สามารถทำได้เป็น
1 2 3 4 5 6 7 8 9 10 11 12 | 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"))?>' ), })); |
ขอยกวิธีใช้งานแบบรวบรัด มาแปะไว้ที่เว็บ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | $(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 |