圓形倒數計時器(Circular Countdown Timer)

今天我們要製作一個的圓形倒數計時器，當時間倒數時，圓形會逐漸變小，最終消失。這個效果常用在活動倒計時或者休息計時器上，也能幫助我們更好地理解CSS動畫以及JavaScript時間控制。

完成圖

HTML

<div class="timer">
  <svg>
    <circle r="90" cx="100" cy="100"></circle>
  </svg>
  <div class="time">
    <span id="time">30</span>
  </div>
</div>

這裡我們使用了svg和circle來畫一個圓形。這樣的設置讓我們可以通過控制circle的stroke-dashoffset來實現倒數縮小的效果。

接著我們使用CSS來美化計時器，並設置時間結束後的縮放特效。這裡的重點是控制圓形的進度條效果和時間結束後的動畫。

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.timer {
  position: relative;
  width: 200px;
  height: 200px;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

circle {
  fill: none;
  stroke: #ff6347;
  stroke-width: 10;
  stroke-dasharray: 565;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

.time {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: bold;
}

.time-up {
  color: red;
  font-size: 80px;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

圓形進度條： 我們使用stroke-dasharray和stroke-dashoffset來控制圓形的進度條。
結束特效： 當時間結束後，time-up類會觸發縮放動畫，數字會變紅並進行縮放，讓效果更加醒目。

最後一步，我們需要使用JavaScript來實現倒數計時，並在時間結束後觸發縮放特效。這裡，我們會使用setInterval來每秒更新時間，並且動態調整圓形進度條。

JavaScript

const timeDisplay = document.getElementById('time');
const circle = document.querySelector('circle');
const totalDuration = 30; // 計時器的總秒數
let currentTime = totalDuration;

const radius = circle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

circle.style.strokeDasharray = circumference;
circle.style.strokeDashoffset = 0;

function updateCircle(time) {
  const offset = circumference - (time / totalDuration) * circumference;
  circle.style.strokeDashoffset = offset;
}

function timeUp() {
  // 結束時的特效
  timeDisplay.classList.add('time-up'); // 加入CSS特效類
}

function countdown() {
  const interval = setInterval(() => {
    currentTime--;
    timeDisplay.textContent = currentTime;
    updateCircle(currentTime);

    if (currentTime <= 0) {
      clearInterval(interval);
      timeUp(); // 時間結束後觸發特效
    }
  }, 1000);
}

countdown();

圓形進度條更新： 我們根據剩餘時間來更新stroke-dashoffset，實現圓形進度條的動畫效果。
時間結束觸發特效： 當計時結束時，我們會添加一個time-up類，讓數字變紅並開始縮放動畫。

最終效果
當倒數開始時，數字會逐漸減少，並且圓形進度條會跟著時間逐漸縮小。當時間結束時，倒數的數字會變紅，並開始不斷地縮放，提醒用戶時間到了。