制作一个倒计时,有开始按钮,可以设置倒计时的时间,点击开始时默认时间是一分钟
时间: 2024-02-20 09:56:39 浏览: 22
以下是一个简单的倒计时的示例,包含一个开始按钮和一个倒计时输入框,可以设置倒计时的时间,默认为一分钟。
HTML代码:
```html
<input type="number" id="countdown" value="60" min="1" max="60"> 秒
<button id="start">开始</button>
<div id="timer"></div>
```
JavaScript代码:
```javascript
// 获取DOM元素
const countdownInput = document.getElementById('countdown');
const startButton = document.getElementById('start');
const timerDisplay = document.getElementById('timer');
let countdownIntervalId; // 定时器ID
// 点击开始按钮的事件处理函数
startButton.addEventListener('click', () => {
// 获取倒计时时间
const countdownTime = countdownInput.value;
// 防止重复点击开始按钮
startButton.disabled = true;
// 显示倒计时,并开始倒计时
timerDisplay.textContent = countdownTime;
countdownIntervalId = setInterval(() => {
countdownTime--;
timerDisplay.textContent = countdownTime;
// 倒计时结束
if (countdownTime <= 0) {
clearInterval(countdownIntervalId); // 清除定时器
startButton.disabled = false; // 恢复开始按钮
alert('时间到!');
}
}, 1000);
});
```
这段代码使用了两个全局变量`countdownIntervalId`和`startButton.disabled`,分别用于存储定时器ID和开始按钮的禁用状态。当点击开始按钮后,获取倒计时时间并开始倒计时,同时禁用开始按钮,避免重复点击。当倒计时结束后,清除定时器并恢复开始按钮的可用状态。