Javascript Countdown Timer

โค้ด Html CSS Javascript Countdown นับถอยหลัง การจับเวลานับถอยหลัง ในที่นี้จะคำนวณแบบนับเวลาถอยหลัง โดยกำหนดค่าได้เป็นจำนวนวัน จำนวนชั่วโมง จำนวนนาที จำนวนวินาที (เหมือนตัวอย่างข้างบน) สามารถเขียนตามตัวอย่างโค้ด HTML ได้ดังนี้

➤ CSS (Cascading Style Sheets) 

<style>

  .divStyle {

    background-color:#ddd;

    padding:10;

    text-align: center;

    font-size: 20px;

  }

</style>

➤ HTML Code

<div class="divStyle">

  <h2>นับถอยหลังวัน ชั่วโมง นาที วินาที<h/2>

  <!-- แสดงข้อความเวลา-->

  <p id="countDown"></p>

</div>

➤ Javascript Code

<script>

  /*// เพิ่มจำนวนวัน add days

      var d = new Date();

      d.setDate(d.getDate() + 1);*/

  // เพิ่มจำนวนชั่วโมง add hours

  var param = new Date();

  param.setHours(24);

  /*// เพิ่มจำนวนนาที add minutes

      var param = new Date();

      param.setMinutes(30);*/

  /*// เพิ่มจำนวนวินาที add seconds

      var param = new Date();

      param.setSeconds(30);*/

  // เพิ่มค่าตัวแปรเพื่อเริ่มนับถอยหลัง set date parameter counting down

  var countDownDate = new Date(param).getTime();

  // อัพเดทค่าทุกๆ 1 วินาที update count down every 1 sec.

  var x = setInterval(function() {

    // วันและเวลาปัจจุบัน date and time today

    var now = new Date().getTime();

    // หาเวลาปัจจุบันที่เหลือ distance between now and the count down date

    var distance = countDownDate - now;

    // คำนวนเวลา calculations for days, hours, minutes and seconds

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));

    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // แสดงค่าบนหน้าจอ output element with id="countDown"

    document.getElementById("countDown").innerHTML = "เหลือเวลา "+ days + "วัน " + hours + "ชั่วโมง "

      + minutes + "นาที " + seconds + "วินาที ";

    // ตรวจสอบกรณีที่หมดเวลา count down is over

    if (distance < 0) {

      clearInterval(x);

      document.getElementById("countDown").innerHTML = "หมดเวลา";

    }

  }, 1000);

</script>