javascript - 为什么倒计时数字经过一定时间后颜色没有变化？

Question

我做了一个简单的倒计时用于运动。我认为自己创建一个很有趣，但我被困在一个我没有足够知识的部分......

倒计时完全按照我的意愿进行，但更改颜色+添加 css 动画似乎是不可能的。这是关于最后一部分“changeColor”

如果您输入 60 秒，它将变为绿色。假设我们输入 29s，它会变成橙色。如果你输入 9s 它会变成红色。

但是当秒数从 30 变为 29 时，为什么它不会自动更改？然后它应该变成橙色。同样适用于 10 > 9 秒，它应该开始闪烁 + 变红，但没有任何反应。

查看下面的脚本:

var CCOUNT;
$(document).ready(function () {
    $('#btnct').click(function () {
        CCOUNT = $('#seconds').val();
        cdreset();
    });
});
var t, count;

function cddisplay() {
    document.getElementById('timespan').innerHTML = count;

}

function countdown() {
    // starts countdown
    cddisplay();
    changeColor(CCOUNT);
    if (count === 0) {
        // time is up
    } else {
        count--;
        t = setTimeout(countdown, 1000);

    }
}

function cdpause() {
    // pauses countdown
    clearTimeout(t);
}

function cdreset() {
    // resets countdown
    cdpause();
    count = CCOUNT;
    cddisplay();
}

function changeColor() {
if (CCOUNT <= 1000 && CCOUNT > 30) {
document.getElementById('counting1').style.color = "#00CC00";

}

else if (CCOUNT <= 30 && CCOUNT > 10) {
document.getElementById('timespan').style.color = "#F87217";
}

else {
document.getElementById('timespan').style.color = "#ff0000";
document.getElementById('timespan').css = ({"text-decoration": "blink", "-webkit-animation-name": "0.2s", "text-decoration": "blink", "-webkit-animation-iteration-count": "infinite", "-webkit-animation-timing-function": "ease-in-out", "-webkit-animation-direction": "alternate"});
}
}

我已将其上传到 baswijdenes.com/simple-countdown 以实时观看。

编辑:我添加了 html

<center>
<form id="frm">
  <div class="counting">  
    <input type="text" class="input" id="seconds" name="seconds" value="0" size="2" maxlength="4" />    

    </div>
    <input type="button" class="btn blue" id="btnct" value="Input" />

</form>

<div class="counting1" id="counting1">
<span type="text" id="timespan">0</span>
</div>
<BR>
<BR>
<div id="divaroundbuttons">
<input type="button" class="btn green" value="Start" onclick="countdown()">
<input type="button" class="btn orange" value="Stop" onclick="cdpause()">
<input type="button" class="btn red" value="Reset" onclick="cdreset()">
</div>
</center>

Answer 1

我试着调试了一下，发现有两个变量让我很困惑:

• 帐号
• 计数

当尝试更改函数 countdown() 并添加 console.log(CCOUNT) 然后我开始倒计时时，我发现这个变量没有倒计时。它是固定的。所以我把 CCOUNT 改成 count 但在这里我发现显示的数字改变了颜色但是它是一个固定数字。

所以我认为作为最终解决方案，您应该对两个变量 CCOUNT 进行倒计时，然后像这样计数:

function countdown() {
    // starts countdown
    cddisplay();
    changeColor(CCOUNT);
    if (CCOUNT=== 0) {
        // time is up
    } else {
        CCOUNT--;
        count--;
        t = setTimeout(countdown, 1000);

    }
}

changeColor() 有另一个问题。你说颜色应该从 29 和 9 秒开始改变，而不是 30 和 10 秒

希望对你有帮助