เพื่อสร้างนาฬิกานับถอยหลัง (countdown timer) ด้วย JavaScript โค้ดมีดังนี้
ตัวอย่าง
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .timer { text-align: center; font-size: 60px; margin-top: 0px; color: white; background-color: rgb(100, 38, 214); } </style> </head> <body> <h1 style="text-align: center;">Countdown Timer Example</h1> <h2 class="timer"></h2> <script> var countDownDate = new Date("June 5, 2022 11:27:15").getTime(); var timeClear = setInterval(function() { var now = new Date().getTime(); var timeLeft = countDownDate - now; var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); var hours = Math.floor( (timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) ); var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; if (timeLeft < 0) { clearInterval(timeClear); document.querySelector(".timer").innerHTML = "Timer Finished"; } }, 1000); </script> </body> </html>ผลลัพธ์
โค้ดข้างต้นจะสร้างผลลัพธ์ดังนี้ -
