Question

我做了一个简单的倒计时用于运动。我觉得自己创造一个很有趣，但我只是因为我没有足够的知识而被困在......

倒计时正如我想要的那样，但改变颜色+添加css动画似乎是不可能的。这是关于最后一部分“changeColor”

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

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

请参阅以下脚本：

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

我试图调试它，我发现有两个变量让我感到困惑：

CCOUNT
计数

当尝试更改函数倒计时（）并添加console.log（CCOUNT）时，我开始倒计时，我发现这个变量没有倒计时。这是固定的。所以我用计数更改了CCOUNT但是在这里我发现显示的数字改变了颜色，但这是一个固定的数字。

所以我认为作为最终的解决方案，你应该倒数两个变量CCOUNT并计算如下：

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

    }
}

changeColor（）还有另一个问题。你说颜色应该从29秒开始变化，而不是30秒和10秒

我希望这可以帮助

为什么倒计时数字颜色在经过一定时间后不会改变？

1 个答案: