如何编写一个函数脚本，向以HTML显示的JavaScript计数计时器添加秒数？_Javascript_Html

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

javascript html

如何编写一个函数脚本，向以HTML显示的JavaScript计数计时器添加秒数？,javascript,html,Javascript,Html,我找到了一个满足我需要的JavaScript计数计时器示例，包括启动/暂停和重置功能。然而，它缺少一件我需要它去做的事情；选择按钮时，让脚本向显示计时器添加2秒这是我的HTML： <!doctype html> <html> <head> <title></title> </head> <p><span id="my_timer" style="color: #f00; font-size

我找到了一个满足我需要的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>


00:00:00
开始
重置
2秒

下面是我的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");
}

//布尔值跟踪计时器状态
var-active=false；
//主要功能
函数启动计时器（）{
//如果为true，则函数处于活动状态
如果（活动）{
var timer=document.getElementById（“我的计时器”）.innerHTML；
var arr=timer.split（“：”；//按“：”将计时器拆分为数组，所以小时到arr[0]，分钟到arr[1]，以此类推。
var hour=arr[0]；//获取小时数
var min=arr[1]；//分钟
var sec=arr[2]；//秒
如果（秒=59）{
如果（最小==59）{
小时++；
最小值=0；
如果（小时<10）小时=“0”+小时；
}否则{
min++；
} 
如果（最小值<10）min=“0”+min；
秒=0；
}否则{
sec++；
如果（秒<10）秒=“0”+秒；
}
//更新我们的html
document.getElementById（“我的计时器”）.innerHTML=hour+“：“+min+”：“+sec；
setTimeout（启动计时器，1000）；//以1秒的速度重复
}
}
//更改状态的功能-通过单击启动或暂停计时器
函数changeState（）{
如果（活动==错误）{
主动=真；
启动计时器（）；
log（“计时器已启动”）；
document.getElementById（“控件”）.innerHTML=“暂停”；
}否则{
主动=假；
日志（“计时器处于暂停状态”）；
document.getElementById（“控件”）.innerHTML=“开始”；
}
}
//复位功能
函数重置（）{
document.getElementById（“我的计时器”）.innerHTML=“00”+”：“+“00”+”：“+“00”；
日志（“计时器已重置”）；
}

我如何编写一个函数脚本，使其在显示计时器上增加2秒？

以下内容仅在计时器运行时有效。要使按钮在计时器是否运行时添加两秒钟，请删除“if（active）{”

//在显示的时间上加上两秒
函数启动计时器（）{
如果（活动）{
var timer=document.getElementById（“我的计时器”）.innerHTML；
var arr=timer.split（“：”；//按“：”将计时器拆分为数组，所以小时到arr[0]，分钟到arr[1]，以此类推。
var hour=arr[0]；//获取小时数
var min=arr[1]；//分钟
var sec=arr[2]；//秒
如果（（秒==58）| |（秒==59））{
如果（最小==59）{
小时++；
最小值=0；
如果（小时<10）小时=“0”+小时；
}否则{
min++；
} 
如果（最小值<10）min=“0”+min；
如果（秒=58）{
秒=0；
}
如果（秒=59）{
秒=1；
}
}否则{
秒=parseInt（秒）+2；
如果（秒<10）秒=“0”+秒；
}
//更新我们的html
document.getElementById（“我的计时器”）.innerHTML=hour+“：“+min+”：“+sec；
}
}

您尝试过什么？我看不到有人试图解决问题中您自己的问题。请包括一份包含您尝试的解决方案的报告，并详细说明您遇到的问题。否则，此问题将被忽略

// 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;    
  }
}