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

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

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

Recently, Jason needed to use an countdown timer for work, but many of the timer were not suitable in format. Let’s start coding! You can copy it to your own web server or use it directly on jasonworkshop.com if you don’t have a web server.

這是我請 AI 作 code 時的畫面
AI assists me in programming.

▼

這是有時分秒的版本
This version shows hours, minutes and seconds:
https://jasonworkshop.com/countdown/countdown1.html

▼

這是只有時分的版本
This version only shows minutes and seconds:
https://jasonworkshop.com/countdown/countdown2.html

▼

以下是 countdown1.html 的 source code, 大家可以改成適合自己使用的格式哦！
Here is the source code for countdown1.html. You can modify it to fit your own format!

<!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>