ตัวอย่างและโค้ดต่อไปนี้ เป็นแนวทางอย่างง่ายในการใช้งาน 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
