Question

我有一个js秒表代码。它有秒，分钟和小时，但没有毫秒。任何人都可以在下面的代码中加上毫秒数。我必须将此代码发布到我的网站上。我无法添加它，因为我对javascript不熟悉。

index.html

    <!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>Stopwatch</title>

    <link rel="stylesheet" href="style.css">

    <script type="text/javascript" src="main.js"></script>

</head>
<body>

    <div class="container">

        <div id="display">
            00:00:00
        </div>

        <div class="buttons">
            <button id="startStop" onclick="startStop()">Start</button> <button id="reset" onclick="reset()">Reset</button>
        </div>

    </div>

</body>
</html>

main.js

//Define vars to hold time values
let seconds = 0;
let minutes = 0;
let hours = 0;

//Define vars to hold "display" value
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;

//Define var to hold setInterval() function
let interval = null;

//Define var to hold stopwatch status
let status = "stopped";

//Stopwatch function (logic to determine when to increment next value, etc.)
function stopWatch(){

    seconds++;

    //Logic to determine when to increment next value
    if(seconds / 60 === 1){
        seconds = 0;
        minutes++;

        if(minutes / 60 === 1){
            minutes = 0;
            hours++;
        }

    }

    //If seconds/minutes/hours are only one digit, add a leading 0 to the value
    if(seconds < 10){
        displaySeconds = "0" + seconds.toString();
    }
    else{
        displaySeconds = seconds;
    }

    if(minutes < 10){
        displayMinutes = "0" + minutes.toString();
    }
    else{
        displayMinutes = minutes;
    }

    if(hours < 10){
        displayHours = "0" + hours.toString();
    }
    else{
        displayHours = hours;
    }

    //Display updated time values to user
    document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;

}



function startStop(){

    if(status === "stopped"){

        //Start the stopwatch (by calling the setInterval() function)
        interval = window.setInterval(stopWatch, 1000);
        document.getElementById("startStop").innerHTML = "Stop";
        status = "started";

    }
    else{

        window.clearInterval(interval);
        document.getElementById("startStop").innerHTML = "Start";
        status = "stopped";

    }

}

//Function to reset the stopwatch
function reset(){

    window.clearInterval(interval);
    seconds = 0;
    minutes = 0;
    hours = 0;
    document.getElementById("display").innerHTML = "00:00:00";
    document.getElementById("startStop").innerHTML = "Start";

}

请通过添加毫秒数来重新创建代码。

Answer 1

将html更改为

<div id="display">
        00:00:00.000
    </div>

然后在您的JavaScript中

//Define vars to hold time values
let seconds = 0;
let ms =0
let minutes = 0;
let hours = 0;

//Define vars to hold "display" value
let displaySeconds = 0;
let displayMs=0;
let displayMinutes = 0;
let displayHours = 0;

//Define var to hold setInterval() function
 let interval = null;

 //Define var to hold stopwatch status
  let status = "stopped";

 //Stopwatch function (logic to determine when to increment next value, etc.)
 function stopWatch(){

  ms++;

//Logic to determine when to increment next value
if(ms/ 60 === 1){
    ms = 0;
   seconds++;

    if(seconds / 60 === 1){
        seconds = 0;
        minutes++;

        if(minutes/60===1){
         minutes = 0;
        hours++;
        }
    }


}

//If seconds/minutes/hours are only one digit, add a leading 0 to the value
if(ms<10){
    displayms = "00" + ms.toString();
}
else if(ms<100){
    displayms = "0"+ms.toString();
}
if(seconds < 10){
    displaySeconds = "0" + seconds.toString();
}
else{
    displaySeconds = seconds;
}

if(minutes < 10){
    displayMinutes = "0" + minutes.toString();
}
else{
    displayMinutes = minutes;
}

if(hours < 10){
    displayHours = "0" + hours.toString();
}
else{
    displayHours = hours;
}

//Display updated time values to user
document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds+"."+displayms;

    }



    function startStop(){

     if(status === "stopped"){

    //Start the stopwatch (by calling the setInterval() function)
    interval = window.setInterval(stopWatch, 1000);
    document.getElementById("startStop").innerHTML = "Stop";
    status = "started";

}
else{

    window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    status = "stopped";

}

  }

      //Function to reset the stopwatch
  function reset(){

window.clearInterval(interval);
seconds = 0;
minutes = 0;
hours = 0;
ms=0;
document.getElementById("display").innerHTML = "00:00:00";
document.getElementById("startStop").innerHTML = "Start";

}

通过TechnicalCafe向此秒表代码添加毫秒-JavaScript

1 个答案: