如何編寫一個函數來為 HTML 中顯示的 JavaScript 計數計時器添加秒數？

Question

我找到了一個滿足我需要的示例 JavaScript 計數計時器，包括啟動/暫停和重置功能。 但是，它缺少我需要做的一件事； 讓腳本在選擇按鈕時向顯示計時器添加 2 秒。

這是我的 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 秒的函數？

Answer 1

以下僅在計時器運行時有效。 無論計時器是否正在運行，要讓按鈕添加兩秒，請刪除“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;    
  }
}

如何編寫一個函數來為 HTML 中顯示的 JavaScript 計數計時器添加秒數？

問題描述

1 個解決方案

解決方案1
0 已采納 2016-03-22 18:42:38

如何編寫一個函數來為 HTML 中顯示的 JavaScript 計數計時器添加秒數？

問題描述

1 個解決方案

解決方案1 0 已采納 2016-03-22 18:42:38

解決方案1
0 已采納 2016-03-22 18:42:38