2番目のストップウォッチが失敗しています

私は8つのストップウォッチを使って簡単なページを作成しようとしていますが、2番目のストップウォッチは機能していません。最初のスクリプトはうまくいくはずですが、2回目には1秒間、次に1秒間休止してからもう一度やり直すことができます。それは私に見えますが、私はこれにかなり新しいです。2番目のストップウォッチが失敗しています

\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>

出典

2016-10-27 James Dunn

あなたが "ファイル名を指定して実行コードスニペット" をクリックしたことがありますか？構文エラーがあります。（Tidyボタンも便利なツールです） – Quentin

迅速な答えは：あなたの第二のタイマの場合

あなたは（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>

出典

2016-10-27 13:38:55 JonSG

2番目のストップウォッチが失敗しています

答えて

関連する問題