ストップウォッチのsetInterval

Question

ストップウォッチを作ろうとしています。ここでは、コードです：

var min = 0, sec = 0, censec = 0 
 

 
$("#startBtn").on("click", function() { \t // when start button is clicked 
 
\t $(this).hide(); \t \t \t // start is hidden 
 
\t $("#stopBtn").show(); \t \t // stop is shown 
 
\t setInterval(add, 10); \t \t // the censec will be increased every 10 millisecond. 
 
\t $("#censec").text(censec); 
 
}) 
 

 
function add() { 
 
\t censec++; 
 
\t if (censec == 100) { 
 
\t \t censec = 0; 
 
\t \t sec++;   
 
\t \t if (sec == 60) { 
 
\t \t \t sec = 0; 
 
\t \t \t min++; 
 
\t \t } 
 
\t }  
 
}

問題はsetInterval()は一度だけ起こるということです。 censecは00から1に変更されます。それでおしまい。

P.S.私はコーディングに新しいので、他に間違いがある場合は、私に教えてください。

Answer 1

setIntervaladdの呼び出しは間違いなく繰り返されます。しかし、あなたのコードはをに表示すると、がの値を一度返したときに、になります。タイマーです。

ディスプレイを100分の1秒ごとに更新する場合は、値を示すコードをaddに入れます。

別に、最初の行にReferenceErrorがあるため、質問にあるコードはまったく実行されません。それらの;は,である必要があります。

例（これはまた、タイマーのハンドルを格納し、停止ボタンをクリックしたときにタイマをクリア）：

var min = 0, sec = 0, censec = 0; 
 
// Note ---^--------^ 
 

 
function add() { 
 
    censec++; 
 
    if (censec == 100) { 
 
    censec = 0; 
 
    sec++;   
 
    if (sec == 60) { 
 
     sec = 0; 
 
     min++; 
 
    } 
 
    }  
 
    $("#censec").text(censec); 
 
} 
 

 
var timer = 0; 
 

 
$("#startBtn").on("click", function() { //when start button is clicked 
 
    $(this).hide();  //start is hidden 
 
    $("#stopBtn").show(); //stop is shown 
 
    timer = setInterval(add,10); //the censec will be increased every 10 millisecond. 
 
}); 
 
$("#stopBtn").on("click", function() { 
 
    clearInterval(timer); 
 
    timer = 0; 
 
    $(this).hide(); 
 
    $("#startBtn").show(); 
 
});

<input type="button" id="startBtn" value="Start"> 
 
<input type="button" id="stopBtn" value="Stop" style="display: none"> 
 
<div id="censec"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

注使用するほとんど細かいかもしれないがあること表示するためのsetIntervalトラック経過時間は悪い考えです。頻繁に正確に発射されません。その後、

代わりに、記録あなたが

var start = Date.now(); 

を始めた...と、タイマーが起動すると、あなたは（ミリ秒）の値を使用すると

var elapsed = Date.now() - start; 

を開始して以来、それがされていますどのくらい把握elapsedであなたのディスプレイを把握してください。

Answer 2

変数の宣言は次のとおりです。の代わりに 、 。

また、等号の数字を確認するには、===を使用する必要がありますが、ここで問題はありません。

あなたのタイマーのビューも更新されません。したがって、あなたのhtmlの更新は、タイマーによって呼び出される関数内にあるはずです。

実際の秒数とミリ秒を使用することを目標にする場合は、タイマーが遅くリアルタイムではないため、Date型を使用することをおすすめします。だからあなたは好きな間隔でタイマーを使いますが、あなたは日付オブジェクトと呼ばれる関数を追加します。 3つの変数をDate型の1つのdatetimeに置き換えることができます。これにより、必要な細かさが得られます。

var dateTimeStart = null, censecElement = null, timer = null; 

$("#startBtn").on("click", function() {//when start button is clicked 
    $(this).hide();  // start is hidden 
    $("#stopBtn").show(); // stop is shown 
    if(timer === null) { 
     // timer was not started 
     dateTimeStart = new Date(); 
     timer = setInterval(updateCensec, 10); //the censec will be increased every 10 millisecond. 
     console.log("Started timer"); 
    } 
}); 

$("#stopBtn").on("click", function() {//when stop button is clicked 
    $(this).hide();  // stop is hidden 
    $("#startBtn").show(); // start is shown 
    if(timer) { 
     // timer is started/running 
     clearInterval(timer); 
     console.log("Stopped timer"); 
    } 
    timer = null; 
}); 

function updateCensec() { 
    var sensec = 0, sec = 0, dateTimeNow = new Date(), diffMilliseconds = 0; 
    diffMilliseconds = dateTimeNow - dateTimeStart; 
    censec = parseInt((diffMilliseconds % 600)/10); // convert milliseconds to centi seconds 
    sec = parseInt(diffMilliseconds/600); 
    if(censecElement === null) { 
     censecElement = $("#censec"); 
    } 
    censecElement.text(sec + ":" + censec); 
}   

私はあなたがあなたのストップウォッチはセンチで時間を表示したい場合でも、ビューごとに10ミリ秒を更新しないことを示唆したいと思います。