[第十八天] 牛刀小試-倒數計時器

2024 iThome 鐵人賽

DAY 18

自我挑戰組

認識JavaScript系列第 18 篇

16th鐵人賽

IRENE

2024-10-02 23:47:27

48 瀏覽

分享至

<html>
<head>
  <title>倒數計時器</title>
</head>
<body>
  <h1>倒數計時器</h1>
  <input type="number" id="inputTime" placeholder="請輸入秒數" min="1" />
  <button id="btnOK" onclick="start()">開始倒數</button>
  <div id=timer>在此顯示</div>
</body>
</html>

一樣的～陽春的畫面。

let timers;

function start(){
	const inputTime = document.getElementById('inputTime').value;
  let intTime = parseInt(inputTime);
  if (isNaN(intTime, 10) || intTime <= 0){
  	alert("輸入錯誤");
   	return;
  }
  
  clearInterval(timers);
  document.getElementById('timer').textContent = intTime;
  
  timers = setInterval(() => {
  	intTime--;
    document.getElementById('timer').textContent = intTime;
    
    if (intTime <= 0){
    	clearInterval(timers);
      alert("時間到");
      document.getElementById('timer').textContent = "在此顯示";
    }
  }, 1000);
}

解釋:
isNaN(): 判斷某數是不是NaN。
其實在input時，已經設定了number，所以isNaN很少有機會出馬。

clearInterval: 取消先前呼叫的定時重複操作。
讓畫面上的輸入框仍可繼續輸入。