求助：为学习专注站点实现可自定义分秒的JavaScript Timer

我不懂JavaScript，平时靠复制粘贴代码，但是会HTML和CSS，现在正在做一个学习专注网站，其他功能都弄完了，就差加一个能设置分秒的计时器。已经做好了显示“00:00”的分秒区块，还有分钟输入框以及“start timer”“clear timer”“stop timer”按钮，下面是相关的HTML和CSS代码：

原Timer HTML代码 #

<button href="#" class="dropdown-btn">Timer</button>
<div class="dropdown-container">
  <p>Enter your time in minutes</p>
  <input id="userInputTimer" type="number" value = "0"/> 
</div>

原Timer CSS代码 #

.timer-block{
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100px;
  height: 50px;
  box-sizing: border-box;
  border: 2px solid rgb(255, 0, 200);
  border-radius: 4px;
  color: white;
  background-color: rgb(77, 5, 83);
  font-size: 16px;
  resize: none;
}
div.timer-block{
margin: auto;
position: fixed;
justify-content:center;
display: table-cell;
vertical-align: bottom;
}

完整解决方案 #

1. 补全HTML代码 #

原HTML缺少计时器显示区块和控制按钮，我帮你补上，还加了可选的秒数输入框（方便直接设置秒数）：

<button href="#" class="dropdown-btn">Timer</button>
<div class="dropdown-container">
  <p>Enter your time in minutes</p>
  <input id="userInputTimer" type="number" value="0" min="0" max="59"/> 
  <!-- 可选：添加秒数输入框，不需要可以直接删掉 -->
  <p>Enter your time in seconds (optional)</p>
  <input id="userInputSeconds" type="number" value="0" min="0" max="59"/>
</div>
<!-- 计时器显示区块 -->
<div class="timer-block" id="timerDisplay">00:00</div>
<!-- 控制按钮组 -->
<div style="text-align: center; margin-top: 10px;">
  <button id="startBtn">start timer</button>
  <button id="stopBtn">stop timer</button>
  <button id="clearBtn">clear timer</button>
</div>

2. 复制粘贴JavaScript代码 #

把这段代码放到你的HTML页面底部（</body>标签之前），或者单独存成.js文件引入：

// 获取页面元素
const timerDisplay = document.getElementById('timerDisplay');
const userInputMinutes = document.getElementById('userInputTimer');
const userInputSeconds = document.getElementById('userInputSeconds');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const clearBtn = document.getElementById('clearBtn');

// 计时器核心变量
let timerInterval;
let totalSeconds = 0;
let isRunning = false;

// 把秒数格式化为MM:SS的两位数显示
function formatTime(seconds) {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}

// 开始计时逻辑
startBtn.addEventListener('click', function() {
  if (isRunning) return; // 防止重复点击开始

  // 获取用户输入的时间，没输入默认0
  const mins = parseInt(userInputMinutes.value) || 0;
  const secs = parseInt(userInputSeconds.value) || 0;
  totalSeconds = mins * 60 + secs;

  // 检查时间是否有效
  if (totalSeconds <= 0) {
    alert('请设置大于0的时间');
    return;
  }

  isRunning = true;
  timerDisplay.textContent = formatTime(totalSeconds);

  // 每秒更新一次时间
  timerInterval = setInterval(function() {
    totalSeconds--;
    timerDisplay.textContent = formatTime(totalSeconds);

    // 时间到了停止计时并提示
    if (totalSeconds <= 0) {
      clearInterval(timerInterval);
      isRunning = false;
      alert('时间到！');
    }
  }, 1000);
});

// 停止计时逻辑
stopBtn.addEventListener('click', function() {
  clearInterval(timerInterval);
  isRunning = false;
});

// 重置计时逻辑
clearBtn.addEventListener('click', function() {
  clearInterval(timerInterval);
  isRunning = false;
  totalSeconds = 0;
  timerDisplay.textContent = '00:00';
  // 清空输入框
  userInputMinutes.value = '0';
  userInputSeconds.value = '0';
});

3. 自定义调整 #

• 不需要秒数输入框的话，直接删掉对应的<p>和<input>标签即可
• 可以给三个控制按钮添加CSS类，和你的网站现有风格统一

内容的提问来源于stack exchange，提问作者DaisyCake 110