2016-03-22 29 views
-2

スタート/ポーズとリセット機能を含め、自分のニーズを満たすサンプルJavaScriptカウントアップタイマーが見つかりました。しかし、それは私がそれが必要な一つのものが欠けている。ボタンを選択すると、スクリプトが表示タイマーに2秒追加されます。ここでHTMLで表示されるJavaScriptカウントアップタイマーに秒を追加する関数をスクリプトで作成するにはどうすればよいですか?

は私のHTMLです:

<!doctype html> 
<html> 
<head> 
    <title></title> 
</head> 
    <p><span id="my_timer" style="color: #f00; font-size: 2000%; font-weight: bold;">00:00:00</span></p> 
    <button id="control" onclick="changeState();">START</button> 
    <button id="reset" onClick="reset();">RESET</button> 
    <button id="updateClock" onClick="updateClock();">2 SECONDS</button> 
    <script type="text/javascript" src="timer.js"></script> 

<body> 
</body> 
</html> 

そして、ここでは私はJavaScriptである:

// boolean keeps track of timer state 
var active = false; 

//main function 
function start_timer() { 
    //function active if true 
    if (active) { 
     var timer = document.getElementById("my_timer").innerHTML; 
     var arr = timer.split(":"); //spliting timer into array by ':', so hour goes to arr[0], minutes go to arr[1], etc. 
     var hour = arr[0]; //getting hour 
     var min = arr[1]; //minutes 
     var sec = arr[2]; //seconds 

     if (sec == 59) { 
      if (min == 59) { 
       hour++; 
       min = 0; 
       if (hour < 10) hour ="0" + hour; 
      } else { 
       min++; 
      } 
      if (min < 10) min = "0" + min; 
      sec = 0; 
     } else { 
      seC++; 
      if (sec < 10) sec = "0" + sec; 
     } 
     //update our html 
     document.getElementById("my_timer").innerHTML = hour + ":" + min + ":" + sec; 
     setTimeout(start_timer, 1000); //repeat with speed of 1 second 
    } 
} 

//functions to change states - start or pause timer by clicking 
function changeState() { 
    if (active == false) { 
     active = true; 
     start_timer(); 
     console.log("Timer has been started"); 
     document.getElementById("control").innerHTML = "PAUSE"; 
    } else { 
     active = false; 
     console.log("Timer is on pause"); 
     document.getElementById("control").innerHTML = "START"; 
    } 
} 

//reset function 
function reset() { 
    document.getElementById("my_timer").innerHTML = "00" + ":" + "00" + ":" + "00"; 
    console.log("Timer has been reset"); 
} 

どのように私は、スクリプトの表示タイマーを2秒を追加する機能をでしょうか?

+1

何を試しましたか?私はあなたの問題を解決するための試みは何も見ていない。 **あなたの試みた解決策**を含む[mcve]を含めてください。そうでなければ、この質問は[トピック外(#1)](/ help/on-topic) – zzzzBov

答えて

0

以下は、タイマーの実行中のみ機能します。タイマーの実行中にボタンを2秒間追加するには、 'if(active){'を削除します。

// add two seconds to displayed time 
function start_timer(){ 
    if (active) { 
    var timer = document.getElementById("my_timer").innerHTML; 
    var arr = timer.split(":"); //spliting timer into array by ':', so hour goes to arr[0], minutes go to arr[1], etc. 
    var hour = arr[0]; //getting hour 
    var min = arr[1]; //minutes 
    var sec = arr[2]; //seconds 

    if ((sec == 58) || (sec == 59)) { 
     if (min == 59) { 
      hour++; 
      min = 0; 
      if (hour < 10) hour ="0" + hour; 
     } else { 
      min++; 
     } 
     if (min < 10) min = "0" + min; 
     if (sec == 58){ 
      sec = 0; 
     } 
     if (sec == 59){ 
      sec = 1;   
     } 
    } else { 
     sec = parseInt(sec) + 2; 
     if (sec < 10) sec = "0" + sec; 
    } 
    //update our html 
    document.getElementById("my_timer").innerHTML = hour + ":" + min + ":" + sec;  
    } 
} 
関連する問題