Question

您好，我正在构建一个Tabata计时器，目前我停留在如何从停止的地方继续计时器的问题上。当我按下停止按钮时，它会像应该的那样停止，但是当我按下开始按钮时，它将重新启动计时器。我知道这样做的原因是因为我没有做到这一点，所以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);

  }

HTML停止/开始时钟功能（保持功能更新）

0 个答案: