如何编写一个函数的脚本，为HTML中显示的JavaScript计数计时器添加秒数

How do I script a function to add seconds to a JavaScript count up timer displaying in HTML?

本文关键字：显示 HTML JavaScript 添加 计时器 何编写 脚本 函数 一个      更新时间：2023-09-26

我找到了一个满足我需求的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秒的函数脚本？

以下仅在计时器运行时工作。要使按钮添加两秒，无论计时器是否正在运行，请删除"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;    
  }
}
相关文章：