javascript - 如何让我的重置按钮在我的倒计时中工作?
问题描述
// global setinterval timer
let countdownEnded = false;
let intervalSeconds = false;
let counter = -1; // reset must be counter = -1
// init
(() => {
updateDisplay(1800, 0);
document.getElementById('millis').innerHTML = "00";
//element.addEventListener("click", function(){ myFunction(p1, p2); });
})();
function start(time = 1800) {
let startTime = Date.now();
let inputTime =
counter === -1
? document.getElementById('minutesInputField').value * 60 || time
: counter
intervalSeconds = setInterval(() => {
let currentTime = Date.now() - startTime;
if (inputTime < 1) {
stop();
} else {
counter = inputTime - updateDisplay(inputTime, currentTime);
updateMillis();
}
}, 1000);
}
function pause() {
clearInterval(intervalSeconds);
interval = undefined;
}
function reset() {
}
function stop() {
let countDivElement = document.getElementById("countdown");
countDivElement.innerHTML = 'countdown done';
countdownEnded = true;
clearInterval(intervalSeconds);
}
function updateDisplay(seconds, currentTime) {
let timeIncrement = Math.floor(currentTime / 1000);
updateTime(seconds - timeIncrement);
return timeIncrement;
}
/**
* @method - updatesecondsond
* @summary - This updates the timer every seconds
*/
function updateTime(seconds) {
let countDivElement = document.getElementById("timer");
let minutes = Math.floor(seconds / 60);
let remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = '0' + remainingSeconds;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
if (seconds > 0) {
seconds = seconds - 1;
} else {
stop();
}
countDivElement.innerHTML = minutes + ":" + remainingSeconds + ":";
};
function updateMillis() {
let countMillsElement = document.getElementById('millis');
let counterMillis = 99;
let millis = 0;
let intervalMillis = setInterval(() => {
if (counterMillis < 0) {
clearInterval(intervalMillis);
counterMillis = 99;
} else {
millis = counterMillis < 10 ? counterMillis + '0' : counterMillis;
};
countMillsElement.innerHTML = millis;
counterMillis--;
}, 10);
if (countdownEnded) {
stop();
clearInterval(intervalMillis);
}
};
<div class="clock" id="model3">
<div id="countdown">
<span id="timer"></span><span id="millis"></span>
</div>
</div>
<input type="number" id="minutesInputField" placeholder="minutes" />
<div class="buttons">
<button class="btn start" onclick="start()">Start</button>
<button class="btn pause" onclick="pause()">Pause</button>
<button class="btn reset" onclick="reset()">Reset</button>
</div>
我用开始、暂停和重置功能进行了倒计时。启动功能起作用并暂停。当我按下暂停然后开始时,它会继续,这样就完美了。但是,如果我想按重置,它需要重置为输入字段中的分钟数。如果那里什么都没有,因为它默认为 30 分钟,当您按下重置按钮时,它需要 30 分钟。那是我的问题。如果有人可以帮助我吗?谢谢!
<html>
<div class="clock" id="model3">
<div id="countdown">
<span id="timer"></span><span id="millis">
</span>
</div>
</div>
<input type="number" id="minutesInputField" placeholder="minutes" />
<div class="buttons">
<button class="btn start" onclick="start()">Start</button>
<button class="btn pause" onclick="pause()">Pause</button>
<button class="btn reset" onclick="reset()">Reset</button>
</div>
</html>
// global setinterval timer
let countdownEnded = false;
let intervalSeconds = false;
let counter = -1; // reset must be counter = -1
// init
(() => {
updateDisplay(1800, 0);
document.getElementById('millis').innerHTML = "00";
//element.addEventListener("click", function(){ myFunction(p1, p2); });
})();
function start(time = 1800) {
let startTime = Date.now();
let inputTime =
counter === -1
? document.getElementById('minutesInputField').value * 60 || time
: counter
intervalSeconds = setInterval(() => {
let currentTime = Date.now() - startTime;
if (inputTime < 1) {
stop();
} else {
counter = inputTime - updateDisplay(inputTime, currentTime);
updateMillis();
}
}, 1000);
}
function pause() {
clearInterval(intervalSeconds);
interval = undefined;
}
function reset() {
clearInterval(intervalSeconds);
document.getElementById('minutesInputField').innerHTML;
}
function stop() {
let countDivElement = document.getElementById("countdown");
countDivElement.innerHTML = 'countdown done';
countdownEnded = true;
clearInterval(intervalSeconds);
}
function updateDisplay(seconds, currentTime) {
let timeIncrement = Math.floor(currentTime / 1000);
updateTime(seconds - timeIncrement);
return timeIncrement;
}
/**
* @method - updatesecondsond
* @summary - This updates the timer every seconds
*/
function updateTime(seconds) {
let countDivElement = document.getElementById("timer");
let minutes = Math.floor(seconds / 60);
let remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = '0' + remainingSeconds;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
if (seconds > 0) {
seconds = seconds - 1;
} else {
stop();
}
countDivElement.innerHTML = minutes + ":" + remainingSeconds + ":";
};
function updateMillis() {
let countMillsElement = document.getElementById('millis');
let counterMillis = 99;
let millis = 0;
let intervalMillis = setInterval(() => {
if (counterMillis < 0) {
clearInterval(intervalMillis);
counterMillis = 99;
} else {
millis = counterMillis < 10 ? counterMillis + '0' : counterMillis;
};
countMillsElement.innerHTML = millis;
counterMillis--;
}, 10);
if (countdownEnded) {
stop();
clearInterval(intervalMillis);
}
};
解决方案
尝试这个 :
function reset() {
clearInterval(intervalSeconds);
updateDisplay(document.getElementById('minutesInputField').value*60,0);
}
或者这个(默认值):
function reset() {
defaultMinute = 30;
clearInterval(intervalSeconds);
updateDisplay((document.getElementById('minutesInputField').value || defaultMinute)*60,0);
}
// global setinterval timer
let countdownEnded = false;
let intervalSeconds = false;
let counter = -1; // reset must be counter = -1
// init
(() => {
updateDisplay(1800, 0);
document.getElementById('millis').innerHTML = "00";
//element.addEventListener("click", function(){ myFunction(p1, p2); });
})();
function start(time = 1800) {
let startTime = Date.now();
let inputTime =
counter === -1
? document.getElementById('minutesInputField').value * 60 || time
: counter
intervalSeconds = setInterval(() => {
let currentTime = Date.now() - startTime;
if (inputTime < 1) {
stop();
} else {
counter = inputTime - updateDisplay(inputTime, currentTime);
updateMillis();
}
}, 1000);
}
function pause() {
clearInterval(intervalSeconds);
interval = undefined;
}
function reset() {
defaultMinute = 30;
clearInterval(intervalSeconds);
updateDisplay((document.getElementById('minutesInputField').value || defaultMinute)*60,0);
}
function stop() {
let countDivElement = document.getElementById("countdown");
countDivElement.innerHTML = 'countdown done';
countdownEnded = true;
clearInterval(intervalSeconds);
}
function updateDisplay(seconds, currentTime) {
let timeIncrement = Math.floor(currentTime / 1000);
updateTime(seconds - timeIncrement);
return timeIncrement;
}
/**
* @method - updatesecondsond
* @summary - This updates the timer every seconds
*/
function updateTime(seconds) {
let countDivElement = document.getElementById("timer");
let minutes = Math.floor(seconds / 60);
let remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = '0' + remainingSeconds;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
if (seconds > 0) {
seconds = seconds - 1;
} else {
stop();
}
countDivElement.innerHTML = minutes + ":" + remainingSeconds + ":";
};
function updateMillis() {
let countMillsElement = document.getElementById('millis');
let counterMillis = 99;
let millis = 0;
let intervalMillis = setInterval(() => {
if (counterMillis < 0) {
clearInterval(intervalMillis);
counterMillis = 99;
} else {
millis = counterMillis < 10 ? counterMillis + '0' : counterMillis;
};
countMillsElement.innerHTML = millis;
counterMillis--;
}, 10);
if (countdownEnded) {
stop();
clearInterval(intervalMillis);
}
};
<html>
<div class="clock" id="model3">
<div id="countdown">
<span id="timer"></span><span id="millis">
</span>
</div>
</div>
<input type="number" id="minutesInputField" placeholder="minutes" />
<div class="buttons">
<button class="btn start" onclick="start()">Start</button>
<button class="btn pause" onclick="pause()">Pause</button>
<button class="btn reset" onclick="reset()">Reset</button>
</div>
</html>
推荐阅读
- python - 基于 QRunnable 的 PyQt 多线程程序无法正常工作
- html - 是否可以使用 CSS 网格使我的图像响应?
- listview - 条件 ListView.builder
- mysql - docker-compose drupal mysql SQLSTATE[HY000] [2002] 没有这样的文件或目录
- python - PyInstaller 不读取库
- javascript - 将 openstreetmap 与 Bike 层一起使用
- r - 使用 plotly 在日期轴中为周末设置不同的背景颜色
- ruby-on-rails - Rails:未定义的局部变量或方法与 Country-State-Select gem
- java - Android当前从arrayList索引尝试更新
- c++ - Mac 上的 Visual Studio Code 警告:“覆盖”关键字是 C++11 扩展 [-Wc++11-extensions]