前端实现天时分秒的倒计时。 倒计时的目标时间可以自己指定。

在前端实现倒计时功能，你可以使用JavaScript结合HTML和CSS。以下是一个基本的例子，目标时间由用户输入，然后计算剩余的时间并实时更新显示：

1. **HTML**: 创建一个输入框让用户输入目标时间（例如以秒为单位）和显示倒计时的地方。

<input type="number" id="target-time" placeholder="请输入目标结束时间(秒)">
<p id="countdown"></p>

2. **CSS**: 简单美化一下倒计时显示部分。

.countdown {
  font-size: 2rem;
  color: #666;
}

3. **JavaScript**: 使用`setInterval`函数每隔一段时间更新倒计时。

const countdownElement = document.getElementById('countdown');
const targetTimeInput = document.getElementById('target-time');

targetTimeInput.addEventListener('input', function() {
  const targetSeconds = parseInt(targetTimeInput.value);
  if (!isNaN(targetSeconds)) {
    startCountdown(targetSeconds);
  } else {
    alert('请输入有效数字');
  }
});

function startCountdown(seconds) {
  let remainingSeconds = seconds;
  const countdownInterval = setInterval(() => {
    countdownElement.textContent = formatTime(remainingSeconds);
    if (remainingSeconds <= 0) {
      clearInterval(countdownInterval);
      countdownElement.textContent = '计时结束';
    } else {
      remainingSeconds--;
    }
  }, 1000); // 每秒更新一次
}

// 格式化时间函数，将秒转换为时分秒格式
function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}