使用Javascript在一个页面上设置多个倒计时按钮

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

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

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

var running=false；
var-endTime=null；
var-timerID=null；
函数startTimer（）{
运行=真；
现在=新日期（）；
now=now.getTime（）；
//将last倍数更改为分钟数
结束时间=现在+（1000*60*680）；
倒数计时（）；
}
函数showCountDown（）{
var now=新日期（）；
now=now.getTime（）；
如果（endTime-现在您的showCountDown2（）方法中还有2个块，您引用的是第一个表单“document.forms[0]”。请尝试引用“document.forms[1]”，看看这是否有帮助？问题已解决！非常感谢Nick:）您的showCountDown2（）方法中还有2个块，您引用的是第一个表单“document.forms[0]“。请尝试引用“document.forms[1]”，看看这是否有帮助？问题已解决！非常感谢您尼克：）
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";
        }
    }
}

<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>