⏳ นาฬิกาถอยหลัง (10 วินาที)

ใช้ setInterval ใน JavaScript เพื่อสร้างนาฬิกาถอยหลังจาก 10 วินาที
เมื่อถึง 0 จะแสดง “✅ หมดเวลา!”

🎬 แบบทดสอบ/การสอบ: แสดงเวลาจำกัด
🍜 เว็บไซต์ทำอาหาร: นับถอยหลังเวลาต้ม
📊 นาฬิกาสำหรับงานนำเสนอ: เครื่องมือเรียบง่ายสำหรับจัดการเวลา
🎮 เวลาจำกัดในเกม: เหมาะสำหรับเกมเล็ก ๆ ที่สร้างเอง!

🧪 ลองใช้งาน: กด “เริ่ม” เพื่อเริ่มนับถอยหลัง 10 วินาที
เมื่อถึง 0 จะแสดง ✅ “หมดเวลา!”
กด “รีเซ็ต” เพื่อเริ่มใหม่ได้ตลอดเวลา

👇นี่ไง👇

เวลาที่เหลือ: 10 วินาที

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ตัวจับเวลานับถอยหลัง</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 50px;
    }
    #countdown {
      font-size: 2rem;
      margin: 20px 0;
    }
    button {
      font-size: 1rem;
      padding: 10px 20px;
      margin: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h1>⏳ ตัวจับเวลานับถอยหลัง</h1>
  <div id="countdown">เวลาที่เหลือ: 10 วินาที</div>
  <button onclick="startCountdown()">เริ่ม</button>
  <button onclick="resetCountdown()">รีเซ็ต</button>

  <script>
    let timeLeft = 10;
    let timerId = null;

    function startCountdown() {
      if (timerId !== null) return;
      document.getElementById("countdown").textContent = "เวลาที่เหลือ: " + timeLeft + " วินาที";

      timerId = setInterval(() => {
        timeLeft--;
        if (timeLeft > 0) {
          document.getElementById("countdown").textContent = "เวลาที่เหลือ: " + timeLeft + " วินาที";
        } else {
          clearInterval(timerId);
          timerId = null;
          document.getElementById("countdown").textContent = "✅ หมดเวลาแล้ว!";
        }
      }, 1000);
    }

    function resetCountdown() {
      clearInterval(timerId);
      timerId = null;
      timeLeft = 10;
      document.getElementById("countdown").textContent = "เวลาที่เหลือ: 10 วินาที";
    }
  </script>

</body>
</html>

⏱ ปรับให้แสดงเวลานับถอยหลังแบบ “นาที:วินาที”

ตัวอย่างนี้ตั้งค่าให้แสดงนับถอยหลังจาก “10 วินาที” แต่หากต้องการแสดงผลในรูปแบบ นาทีและวินาที ก็สามารถทำได้ง่ายๆ ด้วยการคำนวณเพิ่มเล็กน้อย

เช่น หากต้องการให้นับถอยหลังจาก “1 นาที 30 วินาที” ก็ใช้จำนวนวินาทีรวม และแปลงดังนี้:

let totalSeconds = 90;

setInterval(() => {
  totalSeconds--;
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  document.getElementById("countdown").textContent =
    "เวลาที่เหลือ: " + minutes + " นาที " + seconds + " วินาที";
}, 1000);

📏 ตั้งเวลานับถอยหลังได้อิสระ (เช่น 5 นาที, 90 วินาที ฯลฯ)
📱 ใช้ร่วมกับฟอร์มที่รับค่าเวลาได้ง่าย
🧠 รูปแบบ “นาที:วินาที” อ่านเข้าใจง่าย

หัวใจสำคัญของการเขียน Timer คือแยกส่วนของ “ตรรกะการนับเวลา” กับ “การแสดงผล”
เมื่อเข้าใจหลักนี้แล้ว คุณสามารถพัฒนาให้รองรับฟีเจอร์อื่น เช่น หยุดชั่วคราว ดำเนินต่อ หรือแสดงเป็นแถบสถานะได้อีกด้วย

⏳ นาฬิกาถอยหลัง (10 วินาที)

⏱ ปรับให้แสดงเวลานับถอยหลังแบบ “นาที:วินาที”

เทมเพลตที่เกี่ยวข้อง