JS秒表/倒数计时器：秒数变为3位数

I have to create a combination stopwatch and countdown timer - its working okay over all, but for some reason my seconds in the stopwatch are changing to 3 digits when it reaches 10. Not sure what is wrong with the code in the if/else statement! Any ideas are much appreciated...totally pulling my hair out over this. It's supposed to be in minutes/seconds/hundredths format. Thank you!

我必须创建一个组合秒表和倒数计时器 - 它可以正常工作,但由于某种原因,秒表中的秒数在达到10时会变为3位数。不确定if / else语句中的代码有什么问题!非常感谢任何想法...完全拉我的头发。它应该是以分钟/秒/百分之一格式。谢谢!

   // start stopwatch function and declare variables
        var hundr = 10;
        var minutes = 0;
        var seconds = 0;
        var stopwatch = 0;

    // begin stopwatch
       function startStopwatch(){
       "use strict";
        stopwatch = setInterval('setUp()', 100); 
       }
          
    // function to show if the timer reaches 60 seconds, display an alert that says "Time up!" Otherwise, continue incrementing hundredths/seconds
    function setUp(){
    var setTime = document.getElementById('output');
        hundr+=10;
        if (hundr == 100) {
        seconds++;
        hundr = 0;
        }
        if (seconds == 60) {
        minutes++;
        seconds = 0;
        setTime.innerHTML = "Time up!";
        clearInterval(stopwatch);
        return;
}

        // if/else statement to display stopwatch - if number of seconds/minutes are less than 10, display a zero.
        if(seconds < 10){
        setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr;
        } else {
        setTime.innerHTML = '0' + minutes + ':' + seconds + ':' + hundr;
        }	
        if(hundr < 10) {
        setTime.innerHTML = '0' + minutes + ':0' + seconds + ':0' + hundr;
       } else {
        setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr;
    }}
       

    // start countdown function and declare variables
        var ms = 99;
        var mins = 0;
        var secs = 60;
        var countdown = 0;

    function startCountdown(){
        "use strict";        
        countdown = setInterval('incrTimer()', 10);
        }

    function incrTimer(){
        "use strict";

    var regMatch = document.getElementById("output").value;
    var regex = /^\d{0-2}:\d{0-2}:\d{0-2}$/;    
        if (regex.test(regMatch)) { 
           document.getElementById("debug").innerHTML = "valid";
        } else {
           document.getElementById("debug").innerHTML = "invalid - please check your code";
        }
        var setCountd = document.getElementById('output');
        ms--;
        if (ms == -1) {
        secs--;
        ms = 99;
        } 
        if(secs == -1){
        min--;
        secs = 59;
        setCountd.innerHTML = "Time up!";
        clearInterval(countdown);
        alert('Time up');
        return;
    }

        // if/else statement to display countdown - if number of seconds/minutes are less than 10, display a zero in front of number.
        if(secs > 10){
        setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
        } else {
        setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
        }	
        if(ms < 10) {
        setCountd.innerHTML = '0' + mins + ':' + secs + ':0' + ms;
       } else {
        setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
    }}

       // end function incrTimer()


function stopTimer() { // pauses the output for both the stopwatch and the countdown timer
    clearTimeout(stopwatch);
    clearTimeout(countdown);
    } // end function stopTimer()

function clearOutput() { // clear output and restore div area
            document.getElementById("output").innerHTML = "";
    } // end function clearOutput

#output{
    width:300px;
    height:25px;
    background-color: #e4e3db;
    border:1px solid #c3c4bc;

}

span {
    padding: 5px 10px 5px 10px;
    background-color: #00FFFF;
}

h2 {
    font-family: Arial;
    color: #799b3d;
}

h4 {
    font-family: Arial;
    font-style: italic;
    color: #1f8da8;
}

#debug {
    border: 1px solid red;
    width: 620px;
    padding: 10px;
    font-size: small;
    color: blue;
    background-color: #FFFF99;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Final</title>
	<link rel="stylesheet" type="text/css" href="final.css">
        <script type="text/javascript" src="take7.js"></script>
</head>
<body>
<h2>Stopwatch or Countdown Timer</h2>
	<div id="output" ></div>
<p>&nbsp;</p>

    <span id="stopwatch_output" onclick="startStopwatch()">Stopwatch</span>
    <span id="countdown_output" onclick="startCountdown()">Countdown</span>		
    <span id="timerstop" onclick="stopTimer()">STOP</span>
    <span id="resettimer" onclick="clearOutput()">RESET</span>
<p>&nbsp;</p>
    <p><span id="debugOnOff" style="visibility:visible">Debug on/off</span>
       <span id="hideDebug" style="visibility:visible">Hide Debug</span>
<div id="debug"><p id="firstP">This space is reserved for event output information.</p></div>
</body>

</html>

2 个解决方案

#1

    // if/else statement to display stopwatch - if number of seconds/minutes are less than 10, display a zero.
    if(seconds < 10){
    setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr;
    } else {
    setTime.innerHTML = '0' + minutes + ':' + seconds + ':' + hundr;
    }   
    //next block overrides previous 4 lines of code
    if(hundr < 10) {
    //in the next line second can be any "0" is added indistinguishably
    setTime.innerHTML = '0' + minutes + ':0' + seconds + ':0' + hundr; 
   } else {
    setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr;

How to make it work

如何使它工作

setTime.innerHTML = (minutes < 10 ? '0' + minutes : minutes) 
                    + ':' + (seconds < 10 ? '0' + seconds : seconds) 
                    + ':' + (hundr < 10 ? '0' + hundr : hundr);

#2

// start stopwatch function and declare variables
        var hundr = 10;
        var minutes = 0;
        var seconds = 0;
        var stopwatch = 0;

    // begin stopwatch
       function startStopwatch(){
       "use strict";
        stopwatch = setInterval('setUp()', 100); 
       }

    // function to show if the timer reaches 60 seconds, display an alert that says "Time up!" Otherwise, continue incrementing hundredths/seconds
    function setUp(){
    var setTime = document.getElementById('output');
        hundr+=10;
        if (hundr == 100) {
        seconds++;
        hundr = 0;
        }
        if (seconds == 60) {
        minutes++;
        seconds = 0;
        setTime.innerHTML = "Time up!";
        clearInterval(stopwatch);
        return;
}

        // if/else statement to display stopwatch - if number of seconds/minutes are less than 10, display a zero.
        if(seconds < 10){
        setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr;
        } else {
        setTime.innerHTML = '0' + minutes + ':' + seconds + ':' + hundr;
        }   

        var secLabel = seconds > 10 ? ':' +seconds : ':0' + seconds;
        if(hundr < 10) {
        setTime.innerHTML = '0' + minutes + secLabel + ':0' + hundr;
       } else {
        setTime.innerHTML = '0' + minutes + secLabel + ':' + hundr;
    }}


    // start countdown function and declare variables
        var ms = 99;
        var mins = 0;
        var secs = 60;
        var countdown = 0;

    function startCountdown(){
        "use strict";        
        countdown = setInterval('incrTimer()', 10);
        }

    function incrTimer(){
        "use strict";

    var regMatch = document.getElementById("output").value;
    var regex = /^\d{0-2}:\d{0-2}:\d{0-2}$/;    
        if (regex.test(regMatch)) { 
           document.getElementById("debug").innerHTML = "valid";
        } else {
           document.getElementById("debug").innerHTML = "invalid - please check your code";
        }
        var setCountd = document.getElementById('output');
        ms--;
        if (ms == -1) {
        secs--;
        ms = 99;
        } 
        if(secs == -1){
        min--;
        secs = 59;
        setCountd.innerHTML = "Time up!";
        clearInterval(countdown);
        alert('Time up');
        return;
    }

        // if/else statement to display countdown - if number of seconds/minutes are less than 10, display a zero in front of number.
        if(secs > 10){
        setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
        } else {
        setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
        }   
        if(ms < 10) {
        setCountd.innerHTML = '0' + mins + ':' + secs + ':0' + ms;
       } else {
        setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
    }}

       // end function incrTimer()


function stopTimer() { // pauses the output for both the stopwatch and the countdown timer
    clearTimeout(stopwatch);
    clearTimeout(countdown);
    } // end function stopTimer()

function clearOutput() { // clear output and restore div area
            document.getElementById("output").innerHTML = "";
    } // end function clearOutput