javascript - 我希望我的输入按钮与开始和暂停功能一起使用
问题描述
我有一个默认为 30 分钟的倒计时和一个带有其他分钟的输入字段,如果您想要 30 分钟以外的时间,您可以输入。我有 3 个按钮启动、暂停和重置所有按钮工作。但是,如果我想开始倒计时,它需要工作,如果我想暂停它,我想再次按 Enter 键,然后它就会暂停。
// global setinterval timer
let countdownEnded = false;
let countdownIsRunning = false;
let counter = -1; // reset must be counter = -1
let counterMillis = 99;
// counters
let intervalSeconds = false;
let intervalMillis = false;
// init
(() => {
updateDisplay(1800, 0);
document.getElementById('millis').innerHTML = "00";
})();
let input = document.getElementById("minutesInputField");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
document.getElementById("btnStart").click();
}
});
function start(time = 1800) {
let startTime = Date.now();
let inputTime;
let countdownDoneElement =
document.getElementById("cd-done");
countdownDoneElement.style.display = 'none';
let countdownRunningElement =
document.getElementById('cd-running');
countdownRunningElement.style.display = 'inline-flex';
if (!countdownIsRunning) {
countdownIsRunning = true;
inputTime =
counter === -1
? document.getElementById('minutesInputField').value * 60 || time
: counter
} else {
inputTime = document.getElementById('minutesInputField').value * 60 || time
}
clearInterval(intervalSeconds);
intervalSeconds = setInterval(() => {
let currentTime = Date.now() - startTime;
if (inputTime < 1) {
stop();
} else {
counter = inputTime - updateDisplay(inputTime, currentTime);
updateMillis();
}
}, 1000);
}
function pause() {
clearInterval(intervalSeconds);
clearInterval(intervalMillis);
countdownIsRunning = false;
}
function reset() {
// clear existing intervals
clearInterval(intervalSeconds);
clearInterval(intervalMillis);
let currentTimeInput = document.getElementById('minutesInputField').value * 60;
counter = currentTimeInput || 1800;
counterMillis = 0;
updateDisplay(counter, 0);
//defaultMinute = 30;
//updateDisplay((document.getElementById('minutesInputField').value || defaultMinute) * 60, 0);
}
function stop() {
let countdownRunningElement = document.getElementById("cd-running");
let countdownDoneElement = document.getElementById("cd-done");
countdownRunningElement.style.display = 'none';
countdownDoneElement.style.display = 'inline-flex';
countdownDoneElement.innerHTML = 'countdown done';
countdownEnded = true;
clearInterval(intervalSeconds);
clearInterval(intervalMillis);
}
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 millis = 0;
// milliseconds from document.getElementById.value
// check for value and let counter continue from that point on
clearInterval(intervalMillis);
intervalMillis = setInterval(() => {
if (counterMillis < 0) {
counterMillis = 99;
} else {
millis = counterMillis < 10 ? counterMillis + '0' : counterMillis;
};
countMillsElement.innerHTML = millis;
counterMillis--;
}, 10);
if (countdownEnded) {
stop();
}
};
<div class="clock" id="model3">
<div id="countdown">
<div id="cd-running">
<span id="timer"></span>
<span id="millis"></span>
</div>
<div id="cd-done" style="display: none;">
</div>
</div>
</div>
<input type="number" id="minutesInputField" placeholder="minutes" value="30" />
<div class="buttons">
<button id="btnStart" onclick="start()">Start</button>
<button id="btnPause" onclick="pause()">Pause</button>
<button id="btneset" onclick="reset()">Reset</button>
</div>
<html>
<div class="clock" id="model3">
<div id="countdown">
<div id="cd-running">
<span id="timer"></span>
<span id="millis"></span>
</div>
<div id="cd-done" style="display: none;">
</div>
</div>
</div>
<input type="number" id="minutesInputField" placeholder="minutes" value="30" />
<div class="buttons">
<button id="btnStart" onclick="start()">Start</button>
<button id="btnPause" onclick="pause()">Pause</button>
<button id="btnReset" 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() {
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);
}
};
解决方案
推荐阅读
- nlp - 在为 HuggingFace 编码数据集时使用所有可用 RAM 后会话崩溃
- python - 文本转语音时如何打印
- c# - C#统一如何使用点积来保持2个外部向量相对于内部向量作为内部向量的变化
- postgresql - Docker-Compose 找不到配置环境文件
- sql - 如何在sql server中查找以大写字母开头的名称
- flutter - 使用 url 启动器的电子邮件正文不正确
- java - 将 API 响应限制为 100 并迭代它直到响应结束
- reactjs - 如何在 React.js 中的菜单组件基础上更改 Home 组件中的数据
- google-cloud-platform - Terraform - GCP - 启用 alpha API
- javascript - 密码验证在登录表单中不起作用