自家製倒數計時器 – Q1 countdown timer

最近 Jason 工作上需要用到網上倒數計時器，為了完成切合自己需要當然又要動手作 code 啦！不過今次作 code 交由 AI 負責，Jason就負責最後的檢查及調整，整個 program 的初稿不到 15 分鐘便完成、而且完成度達到 100%！實在不得不配服 AI 的能力。

至於這個倒數計時器大家可自行抄到自己的網頁伺服器使用，沒有私家伺服器的話也可直接用 jasonworkshop.com 的。

這是我請 AI 作 code 時的畫面

這是有時分秒的版本
https://jasonworkshop.com/countdown/countdown1.html

這是只有分秒的版本
https://jasonworkshop.com/countdown/countdown2.html

以下是 countdown1.html 的 source code, 大家可以改成適合自己使用的格式哦！

<!DOCTYPE html>
<html>
<head>
<style>
button {
  background-color: #fcb900;
  border: none;
  color: #333333;
  padding: 15px 30px;
  margin: 0px 0px 0px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}
</style>
</head>
<body style="background-color: #FFFFFF;">

<div id="timer" align=center style="font-family: Arial, Helvetica; font-size: 25vw;">00:00:00</div>
<div align=center>
  <button style="background-color: #56c1ff;" onclick="addHour()">+1 hour</button>
  <button style="background-color: #56c1ff;" onclick="subtractHour()">-1 hour</button>
  <button style="background-color: #fcb900;" onclick="addMinute()">+1 min</button>
  <button style="background-color: #fcb900;" onclick="subtractMinute()">-1 min</button>
  <button style="background-color: #61d836;" onclick="startTimer()">START</button>
  <button style="background-color: #d4fb79;" onclick="pauseTimer()">PAUSE</button>
  <button style="background-color: #ff7e79;" onclick="stopTimer()">RESET</button>
</div>

<script>
  var timeLeft = 0;
  var timerId = null;

  function formatTime(time) {
    document.getElementById('timer').style.color = 'black';
    var hours = Math.floor(time / 3600);
    var minutes = Math.floor((time - hours * 3600) / 60);
    var seconds = time % 60;
    return ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);
  }

  function updateTimer() {
    document.getElementById('timer').innerHTML = formatTime(timeLeft);
    if (timeLeft == 0) {
      document.getElementById('timer').style.color = 'red';
      clearInterval(timerId);
    }
    timeLeft--;
  }

  function addHour() {
    timeLeft += 3600;
    document.getElementById('timer').innerHTML = formatTime(timeLeft);
  }

  function subtractHour() {
    if (timeLeft >= 3600) {
      timeLeft -= 3600;
      document.getElementById('timer').innerHTML = formatTime(timeLeft);
    }
  }

  function addMinute() {
    timeLeft += 60;
    document.getElementById('timer').innerHTML = formatTime(timeLeft);
  }

  function subtractMinute() {
    if (timeLeft >= 60) {
      timeLeft -= 60;
      document.getElementById('timer').innerHTML = formatTime(timeLeft);
    }
  }

  function startTimer() {
    if (timerId === null) {
      timerId = setInterval(updateTimer, 1000);
    }
  }

  function pauseTimer() {
    clearInterval(timerId);
    timerId = null;
  }

  function stopTimer() {
    timeLeft = 0;
    document.getElementById('timer').innerHTML = formatTime(timeLeft);
    pauseTimer();
  }

  document.getElementById('timer').innerHTML = formatTime(timeLeft);
</script>

</body>
</html>