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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
countdown jquery

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

ดูแล้ว 11,298 ครั้ง


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


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: countdown jquery




เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



( หรือ เข้าใช้งานผ่าน Social Login )




URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ