javascript编写一个脚本,当您单击“开始”按钮时运行。如果倒计时已经开始,“开始”按钮不应响应按下; 按下“暂停”按钮,倒计时应停止; 通过按“停止”按钮,倒计时应停止,字段值应重置为0。倒计时分钟和秒应每秒显示在页面上的相应输入字段中(带有标识符和min,sec); 当时间变为 0 分 0 秒时,倒计时应停止;并且时间倒计时到 0 分 0 秒时,显示用户设置的提醒文本,并将页面的背景色更改为用户指定的颜色。 有必要实现重新启动倒计时的功能(在这种情况下,您需要重置页面的背景颜色);
时间: 2024-02-18 17:04:13 浏览: 61
HTML弹出窗口上的自动单击按钮
好的,以下是一个实现倒计时功能的JavaScript脚本。
HTML代码:
```html
<label>倒计时:</label>
<input type="text" id="countdown-min" value="0" /> 分
<input type="text" id="countdown-sec" value="0" /> 秒
<button id="start-btn">开始</button>
<button id="pause-btn">暂停</button>
<button id="stop-btn">停止</button>
```
JavaScript代码:
```javascript
var countdownInterval; // 定时器
var countdownTime; // 倒计时时间,以毫秒为单位
var countdownTargetTime; // 倒计时目标时间,以毫秒为单位
var countdownPaused = false; // 倒计时是否暂停
var startBtn = document.getElementById('start-btn');
var pauseBtn = document.getElementById('pause-btn');
var stopBtn = document.getElementById('stop-btn');
var minInput = document.getElementById('countdown-min');
var secInput = document.getElementById('countdown-sec');
var reminderText = '时间到!'; // 提醒文本
var bgColor = 'red'; // 背景颜色
startBtn.addEventListener('click', function() {
if (!countdownInterval && !countdownPaused) { // 如果倒计时未开始并且未暂停
// 计算倒计时时间,以毫秒为单位
countdownTime = parseInt(minInput.value) * 60 * 1000 + parseInt(secInput.value) * 1000;
countdownTargetTime = Date.now() + countdownTime;
countdownInterval = setInterval(updateCountdown, 1000);
}
});
pauseBtn.addEventListener('click', function() {
if (countdownInterval) { // 如果倒计时已经开始
if (countdownPaused) { // 如果倒计时已经暂停
countdownTargetTime = Date.now() + countdownTime;
countdownPaused = false;
pauseBtn.innerText = '暂停';
} else {
countdownTime = countdownTargetTime - Date.now();
clearInterval(countdownInterval);
countdownInterval = null;
countdownPaused = true;
pauseBtn.innerText = '继续';
}
}
});
stopBtn.addEventListener('click', function() {
if (countdownInterval) { // 如果倒计时已经开始
clearInterval(countdownInterval);
countdownInterval = null;
}
countdownPaused = false;
pauseBtn.innerText = '暂停';
minInput.value = '0';
secInput.value = '0';
document.body.style.backgroundColor = '';
});
function updateCountdown() {
var remainingTime = countdownTargetTime - Date.now();
if (remainingTime <= 0) { // 时间到了
clearInterval(countdownInterval);
countdownInterval = null;
document.body.style.backgroundColor = bgColor;
alert(reminderText);
} else {
var remainingMin = Math.floor(remainingTime / 60000);
var remainingSec = Math.floor((remainingTime - remainingMin * 60000) / 1000);
minInput.value = remainingMin;
secInput.value = remainingSec;
}
}
```
这个脚本实现了您的要求,可以在页面中显示倒计时,并且可以开始、暂停、停止倒计时。当倒计时时间到达0分0秒时,页面会显示用户设置的提醒文本,并将背景色更改为用户指定的颜色。需要注意的是,如果倒计时已经开始,再次点击“开始”按钮不会有任何反应。如果要重新开始倒计时,需要先点击“停止”按钮。
阅读全文