Здравствуйте, я создаю таймер табата, и в настоящее время я застрял на том, как продолжить мой таймер с того места, где он остановился. Когда я нажимаю кнопку остановки, она останавливается, как и должна, но когда я нажимаю кнопку запуска, она перезапускает таймер. Я понимаю, что причина этого заключается в том, что я этого не сделал, поэтому переменная totalTime остается обновленной в последний раз перед остановкой, но я не знаю, как это сделать. Я создаю этот забавный таймер, и у меня почти нет опыта работы с html, поэтому, если вы достаточно любезны, пожалуйста, помните об этом :). Вот HTML,. css и javascript У меня есть:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="Countdown From Scratch.css" />
</head>
<script src="Countdown From Scratch.js" defer></script>
<body>
<label>Number of Sets </label>
<input id="userInput1" type="numsets" value = "0"/>
<label>Time to Work </label>
<input id="userInput2" type="numwork" value = "0"/>
<label>Time to Rest </label>
<input id="userInput3" type="numrest" value = "0"/>
<label>Preparation </label>
<p id="Prepare"> 05 </p>
<label>Sets Input </label>
<p id="sets"> 00 </p>
<label>Time on </label>
<p id="timeon"> 00 </p>
<label>Time off </label>
<p id="timeoff"> 00 </p>
<label>Total time </label>
<p id="TotalTime"> 00:00 </p>
<button onclick="startTime()">Start time</button>
<button onclick="stop()">Stop time</button>
</body>
</html>
КОНЕЦ HTML КОД НАЧАЛО CSS КОД
p {
display: inline-flex;
align-items: center;
}
label {
float: left;
display: block;
}
#userInput1 {
display: flex;
margin-bottom: 10px;
}
#userInput2 {
display: flex;
margin-bottom: 10px;
}
#userInput3 {
display: flex;
margin-bottom: 10px;
}
#Prepare {
display: flex;
margin-bottom: 10px;
}
#sets {
display: flex;
margin-bottom: 10px;
}
#timeon {
display: flex;
margin-bottom: 10px;
}
#timeoff {
display: flex;
margin-bottom: 10px;
}
#TotalTime {
display: flex;
margin-bottom: 10px;
}
input {
height: 20px;
}
КОНЕЦ CSS КОД СТАРТ JAVASCRIPT
var numsets = document.getElementById("userInput1");
var numwork = document.getElementById("userInput2");
// var Working = timer2.value;
var numrest = document.getElementById("userInput3");
// var Resting = timer3.value;
var sets;
var timeon;
var timeoff;
var totalTime;
var TTime;
function startTime() {
document.getElementById("sets").innerHTML = numsets.value;
document.getElementById("timeon").innerHTML = numwork.value;
document.getElementById("timeoff").innerHTML = numrest.value;
sets = numsets.value;
timeon = numwork.value;
timeoff = numrest.value;
totalTime = (parseFloat(sets) * (parseFloat(timeon) + parseFloat(timeoff)));
interval = setInterval(updateCountdown, 1000);
function updateCountdown() {
var minutes= Math.floor (parseFloat(totalTime) / 60);
var seconds = parseFloat(totalTime) % 60;
document.getElementById("TotalTime").innerHTML = minutes + ":" + seconds;
totalTime--;
}
}
function stop(){
clearTimeout(interval);
}