javascript - 根据倒计时改变div的颜色

Question

我不知道如何正确表达，但我有一个倒计时，我希望随着计时器倒计时，颜色逐渐从绿色变为红色(如果有意义的话，就像渐变一样)。因此，当时间达到 25 分钟时，它会变为绿色，并在到达 00:00:00 时完成向红色的更改。

我知道你可以根据时间改变它，但我找不到逐步改变的解决方案。

我尝试了以下JS，然后在单击“go”时调用changeColor()，但这有点困惑，停止倒计时，我不知道从这里去哪里:

function changeColor() {
    if (document.getElementById("time").innerHTML === "00:00:00") {
        $("#tomato").css("background-color", "#37bd5b");
    } else if (document.getElementById("time").innerHTML !== "00:00:00") {
        $("#tomato").css("background-color", "#D71F27");
}

这是fiddle ，我希望红色背景在单击“go”后开始变化。

编辑:我最终想添加更改倒计时分钟数的功能。

Answer 1

您可以使用 jquery animate 函数。首先包含 jquery ui 以便颜色功能起作用。然后获取单击“开始”时的时间。

var pieces = startTime.split(":");
var time = new Date();
time.setHours(pieces[0]);
time.setMinutes(pieces[1]);
time.setSeconds(pieces[2]);
var timerSec=time.getSeconds()+time.getMinutes()*60+time.getHours()*3600;
$('#tomato').animate({
  backgroundColor: "#00e50b"
}, timerSec*1000);

在重置中，您还需要添加

$('#tomato').stop();
$('#tomato').attr('style', 'background-color:#D72028');

fiddle -我将 fiddle 中的时间更改为更短并且更容易看到结果。