使用Javascript在一个页面上的多个倒计时计时器按钮

Question

我想在一个页面上设置多个倒数计时器按钮。我也试图在点击时更改按钮颜色（单击时变为绿色到红色），并在计时器达到零时刷新颜色和计时器显示。

我可以只使用一个计时器，但是当尝试运行第二个计时器时，它不起作用。

这是我使用的代码。 （请记住，我只是一个初学者：）

var running = false;
var endTime = null;
var timerID = null;

function startTimer() {
    running = true;
    now = new Date();
    now = now.getTime(); 
    // change last multiple for the number of minutes
    endTime = now + (1000 * 60 * 680);
    showCountDown();
}


function showCountDown() {
    var now = new Date();
    now = now.getTime();
    if (endTime - now <= 0) {
        stopTimer()


    } else {
        var delta = new Date(endTime - now);
        var theMin = delta.getMinutes();
        var theSec = delta.getSeconds();
        var theHour = delta.getHours();
        var theTime = theHour 
        theTime += ((theMin < 10) ? ":0" : ":") + theMin;
        theTime += ((theSec < 10) ? ":0" : ":") + theSec;
        document.forms[0].timerDisplay1.value = theTime;
        if (running) {
            timerID = setTimeout("showCountDown()",1000);
            document.getElementById("startTime1").style.backgroundColor = "RED";
            document.getElementById("timerDisplay1").style.backgroundColor = "RED";
            document.forms[0].startTime1.value = "WAIT";
        }
    }
}



function stopTimer() {
    clearTimeout(timerID)
    running = false;
    document.forms[0].timerDisplay1.value = "13:20:00";
    document.getElementById("timerDisplay1").style.backgroundColor = "green";
    document.getElementById("startTime1").style.backgroundColor = "green";
    document.forms[0].startTime1.value = "START";
}

这很好用，但是在我为第二个定时器添加下面的代码后，它不起作用。我更改了函数和变量名称（不知道是否有必要），但没有任何帮助。

function startTimer2() {
    running2 = true;
    now2 = new Date();
    now2 = now2.getTime(); 
    // change last multiple for the number of minutes
    endTime2 = now2 + (1000 * 60 * 680);
    showCountDown2();
}



function stopTimer2() {
    clearTimeout(timerID2)
    running2 = false;
    document.forms[0].timerDisplay2.value = "13:20:00";
    document.getElementById("timerDisplay2").style.backgroundColor = "green";
    document.getElementById("startTime2").style.backgroundColor = "green";
    document.forms[0].startTime2.value = "START";
    }

    function showCountDown2() {
    var now2 = new Date();
    now2 = now2.getTime();
    if (endTime2 - now2 <= 0) {
        stopTimer2()


    } else {
        var delta2 = new Date(endTime2 - now2);
        var theMin2 = delta2.getMinutes();
        var theSec2 = delta2.getSeconds();
        var theHour2 = delta2.getHours();
        var theTime2 = theHour2 
        theTime2 += ((theMin2 < 10) ? ":0" : ":") + theMin2;
        theTime2 += ((theSec2 < 10) ? ":0" : ":") + theSec2;
        document.forms[0].timerDisplay2.value = theTime2;
        if (running2) {
            timerID2 = setTimeout("showCountDown2()",1000);
            document.getElementById("startTime2").style.backgroundColor = "RED";
            document.getElementById("timerDisplay2").style.backgroundColor = "RED";
            document.forms[0].startTime2.value = "WAIT";
        }
    }
}

和HTML方面;

<FORM>
<a href="http://www.google.com" target="_blank">
<INPUT TYPE="button" ID="startTime1" VALUE="START" onClick="startTimer()"</a>

<INPUT TYPE="text" ID="timerDisplay1" VALUE="13:20:00">
</FORM>

<FORM>
<a href="http://www.yahoo.com" target="_blank">
<INPUT TYPE="button" ID="startTime2" VALUE="START" onClick="startTimer2()"</a>

<INPUT TYPE="text" ID="timerDisplay2" VALUE="01:00:00">
</FORM>