Ошибка секундомера

Question

Я пытаюсь сделать простую страницу с 8 секундомерами на секундах, секунда секундомера не работает, и я не могу понять, какие идеи? Первый скрипт работает так, как если бы второй, когда я нахожусь в начале удара, даст мне одну секунду, затем я могу приостановить и возобновить и получить вторую секунду. Это выглядит правильно, но я довольно новичок в этом.

\t \t \t var time = 0; 
 
\t \t \t var running = 0; 
 
\t \t \t 
 
\t \t \t function startPause() 
 
\t \t \t { 
 
\t \t \t \t if(running == 0){ 
 
\t \t \t \t \t running = 1; 
 
\t \t \t \t \t increment(); 
 
\t \t \t \t \t document.getElementById("startPause").innerHTML = "Pause"; 
 
\t \t \t \t }else{ 
 
\t \t \t \t \t running = 0; 
 
\t \t \t \t \t document.getElementById("startPause").innerHTML = "Resume"; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function reset() 
 
\t \t \t { 
 
\t \t \t \t running = 0; 
 
\t \t \t \t time = 0; 
 
\t \t \t \t document.getElementById("startPause").innerHTML = "Start"; 
 
\t \t \t \t document.getElementById("output").innerHTML = "00:00:00"; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function increment() 
 
\t \t \t { 
 
\t \t \t \t if(running == 1){ 
 
\t \t \t \t \t setTimeout(function(){ 
 
\t \t \t \t \t \t time++; 
 
\t \t \t \t \t \t var mins = Math.floor(time/10/60); 
 
\t \t \t \t \t \t var secs = Math.floor(time/10 % 60); 
 
\t \t \t \t \t \t var tenths = time % 10; 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t if(mins < 10){ 
 
\t \t \t \t \t \t \t mins = "0" + mins; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if(secs < 10){ 
 
\t \t \t \t \t \t \t secs = "0" + secs; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t document.getElementById("output").innerHTML = mins + ":" + secs + ":" + "0" + tenths; 
 
\t \t \t \t \t \t increment(); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t },100); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t \t var time2 = 0; 
 
\t \t \t \t var running2 = 0; 
 
\t \t \t 
 
\t \t \t \t function startPause2() 
 
\t \t \t \t { 
 
\t \t \t \t \t if(running2 == 0){ 
 
\t \t \t \t \t \t running2 = 1; 
 
\t \t \t \t \t \t increment2(); 
 
\t \t \t \t \t \t document.getElementById("startPause2").innerHTML = "Pause"; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t else{ 
 
\t \t \t \t \t \t running2 = 0; 
 
\t \t \t \t \t \t document.getElementById("startPause2").innerHTML = "Resume"; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t 
 
\t \t \t \t function reset2() 
 
\t \t \t \t { 
 
\t \t \t \t \t running2 = 0; 
 
\t \t \t \t \t time2 = 0; 
 
\t \t \t \t \t document.getElementById("startPause2").innerHTML = "Start"; 
 
\t \t \t \t \t document.getElementById("output2").innerHTML = "00:00:00"; 
 
\t \t \t \t } 
 
\t \t \t 
 
\t \t \t \t function increment2() 
 
\t \t \t \t { 
 
\t \t \t \t \t if(running2 == 1){ 
 
\t \t \t \t \t \t setTimeout(function(){ 
 
\t \t \t \t \t \t \t time2++; 
 
\t \t \t \t \t \t \t var mins2 = Math.floor(time2/10/60); 
 
\t \t \t \t \t \t \t var secs2 = Math.floor(time2/10 % 60); 
 
\t \t \t \t \t \t \t var tenths2 = time2 % 10; 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t \t if(mins2 < 10){ 
 
\t \t \t \t \t \t \t \t mins2 = "0" + mins2; 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t if(secs2 < 10){ 
 
\t \t \t \t \t \t \t \t secs2 = "0" + secs2; 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t document.getElementById("output2").innerHTML = mins2 + ":" + secs2 + ":" + "0" + tenths2; 
 
\t \t \t \t \t \t \t increment(); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t },100); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t

html { 
 
\t 
 
\t size: 100%,100%; 
 
\t background-color: #f2f2f2; 
 
} 
 

 
h1{ 
 
\t font-Family: Arial; 
 
\t color: #5573A9; 
 
\t font-size: 40px; 
 
\t position: static; 
 
} 
 
\t 
 
\t body { 
 
\t \t display: block; 
 
\t \t margin:8px, dotted line; 
 
\t \t background-color: #f2f2f2; 
 
\t \t 
 
\t \t 
 
\t } 
 
\t 
 
\t 
 

 

 
#output{ 
 
\t position:center; 
 
\t \t \t \t width:120px; 
 
\t \t \t \t height:25px; 
 
\t \t \t \t background-color:#CCC; 
 
\t \t \t \t border:3px solid #999; 
 
\t \t \t } 
 
\t \t \t 
 
#output2{ 
 
\t position: relative; 
 
\t \t \t \t width:120px; 
 
\t \t \t \t height:25px; 
 
\t \t \t \t background-color:#CCC; 
 
\t \t \t \t border:3px solid #999; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t table { 
 
\t \t \t \t display:table; 
 
\t \t \t \t border-collapse:seperate; 
 
\t \t \t \t border-spacing: 52px; 
 
\t \t \t \t border-color: #FFF; 
 
\t \t \t }

<html> 
 
\t <head> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t \t 
 
\t \t <title>Time Study</title> 
 
\t \t <h1>Time Study</h1> 
 
\t </head> 
 
\t 
 
\t <body> 
 
\t <table> 
 
\t <tr> 
 
\t <th>Bin</th> 
 
\t <th>Bulk</th> 
 
\t </tr> 
 
\t <tr> 
 
\t <td> 
 
\t \t <p id="output"></p> 
 
\t \t <div id="controls"> 
 
\t \t <button id="startPause" onclick="startPause()">Start</button> 
 
\t \t <button onclick="reset()">Reset</button> 
 
\t \t </div> 
 
\t \t </td> 
 
\t \t <td> 
 
\t \t <p id="output2"></p> 
 
\t \t <div id="controls2"> 
 
\t \t <button id="startPause2" onclick="startPause2()">Start</button> 
 
\t \t <button onclick="reset2()">Reset</button> 
 
\t \t </div> 
 
\t \t </td> 
 
\t \t </tr> 
 
\t \t </table> 
 
\t </body> 
 
</html>

Answer 1

Быстрый ответ:

В случае Вашего второго таймера, вы вызываете приращение(), когда вам нужно вызвать increment2() ,

Чем дольше ответ:

Это указывает на недостаток в том, как вы пытаетесь решить эту проблему. Если вы в конце концов захотите 8 таймеров, это будет большой старый беспорядок.

Что вы хотите сделать, так это попытаться решить проблему, чтобы большая часть вашего кода была повторно использована, а не скопирована. Если вы хотите помочь с этим, дайте мне знать.

Ищите мой комментарий в JS ниже для вашего исправления.

var time = 0; 
 
var running = 0; 
 

 
function startPause() { 
 
    if (running == 0) { 
 
    running = 1; 
 
    increment(); 
 
    document.getElementById("startPause").innerHTML = "Pause"; 
 
    } else { 
 
    running = 0; 
 
    document.getElementById("startPause").innerHTML = "Resume"; 
 
    } 
 
} 
 

 
function reset() { 
 
    running = 0; 
 
    time = 0; 
 
    document.getElementById("startPause").innerHTML = "Start"; 
 
    document.getElementById("output").innerHTML = "00:00:00"; 
 
} 
 

 
function increment() { 
 
    if (running == 1) { 
 
    setTimeout(function() { 
 
     time++; 
 
     var mins = Math.floor(time/10/60); 
 
     var secs = Math.floor(time/10 % 60); 
 
     var tenths = time % 10; 
 

 
     if (mins < 10) { 
 
     mins = "0" + mins; 
 
     } 
 

 
     if (secs < 10) { 
 
     secs = "0" + secs; 
 
     } 
 

 
     document.getElementById("output").innerHTML = mins + ":" + secs + ":" + "0" + tenths; 
 

 
     increment(); 
 

 
    }, 100); 
 
    } 
 
} 
 
var time2 = 0; 
 
var running2 = 0; 
 

 
function startPause2() { 
 
    if (running2 == 0) { 
 
    running2 = 1; 
 
    increment2(); 
 
    document.getElementById("startPause2").innerHTML = "Pause"; 
 
    } else { 
 
    running2 = 0; 
 
    document.getElementById("startPause2").innerHTML = "Resume"; 
 
    } 
 
} 
 

 
function reset2() { 
 
    running2 = 0; 
 
    time2 = 0; 
 
    document.getElementById("startPause2").innerHTML = "Start"; 
 
    document.getElementById("output2").innerHTML = "00:00:00"; 
 
} 
 

 
function increment2() { 
 
    if (running2 == 1) { 
 
    setTimeout(function() { 
 
     time2++; 
 
     var mins2 = Math.floor(time2/10/60); 
 
     var secs2 = Math.floor(time2/10 % 60); 
 
     var tenths2 = time2 % 10; 
 

 
     if (mins2 < 10) { 
 
     mins2 = "0" + mins2; 
 
     } 
 

 
     if (secs2 < 10) { 
 
     secs2 = "0" + secs2; 
 
     } 
 

 
     document.getElementById("output2").innerHTML = mins2 + ":" + secs2 + ":" + "0" + tenths2; 
 

 
     /// =============================== 
 
     /// This is your fix 
 
     /// =============================== 
 
     // increment(); 
 
     increment2(); 
 
     /// =============================== 
 

 
    }, 100); 
 
    } 
 
}

html { 
 
    size: 100%, 100%; 
 
    background-color: #f2f2f2; 
 
} 
 
h1 { 
 
    font-Family: Arial; 
 
    color: #5573A9; 
 
    font-size: 40px; 
 
    position: static; 
 
} 
 
body { 
 
    display: block; 
 
    margin: 8px, dotted line; 
 
    background-color: #f2f2f2; 
 
} 
 
#output { 
 
    position: center; 
 
    width: 120px; 
 
    height: 25px; 
 
    background-color: #CCC; 
 
    border: 3px solid #999; 
 
} 
 
#output2 { 
 
    position: relative; 
 
    width: 120px; 
 
    height: 25px; 
 
    background-color: #CCC; 
 
    border: 3px solid #999; 
 
} 
 
table { 
 
    display: table; 
 
    border-collapse: seperate; 
 
    border-spacing: 52px; 
 
    border-color: #FFF; 
 
}

<table> 
 
    <tr> 
 
    <th>Bin</th> 
 
    <th>Bulk</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <p id="output"></p> 
 
     <div id="controls"> 
 
     <button id="startPause" onclick="startPause()">Start</button> 
 
     <button onclick="reset()">Reset</button> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <p id="output2"></p> 
 
     <div id="controls2"> 
 
     <button id="startPause2" onclick="startPause2()">Start</button> 
 
     <button onclick="reset2()">Reset</button> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>