แนะนำ การประยุกต์ ใช้งาน jQuery Countdown นับเวลาถอยหลัง

25 November 2014 เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee

countdown jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ countdown jquery

ดูแล้ว 12,158 ครั้ง

ตัวอย่างและโค้ดต่อไปนี้ เป็นแนวทางอย่างง่ายในการใช้งาน jquery countdown

เพื่อนับเวลาถอยหลัง ก่อนถึงจุดเวลาที่กำหนด อาจจะเคยเห็นได้จาก

รายการที่มีการจัดโปรโมชั่น หรือกิจกรรมที่มีกำหนดเวลา ต้องการแสดงเวลากำกับ

แบบนี้เป็นต้น

สามารถเข้าไปดูวิธีใช้านทั้งหมดได้ที่

http://keith-wood.name/countdown.html

หากต้องการประยุกต์ตามตัวอย่างด้านล่าง ดาวน์โหลดไฟล์ แล้วเก็บ 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ