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 个答案: