Question

我不知道如何恰当地说出这个，但我有一个倒计时，我希望颜色从绿色变为红色，渐渐变化（如果有意义，就像渐变一样），因为计时器倒计时。因此，当它在25分钟时它变为绿色，并且在它到达00:00:00时完成其变为红色。

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

我尝试了以下JS，然后在点击＆＃34时调用changeColor();去＆＃34;但这有点乱，停止倒计时工作，我不知道从哪里开始：

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，我希望红色bg在点击后开始更改。

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

Answer 1

您可以使用jquery animate函数。首先包括jquery ui，以便颜色功能起作用。然后获取点击go的时间。

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

在reset点击中，您还需要添加

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

fiddle - 我改变了小提琴中的时间，使其更短，更容易看到结果。

Answer 2

也许就像this？

功能：

function set_background(value)
{
    var hue = ((1-value)*120).toString(10);
  return ["hsl(",hue,",100%,50%)"].join("");
}

Answer 3

我们知道rgb中的绿色是rgb（0,255,00），红色是rgb（255,0,0）。然而，你有很多秒钟在25分钟 - 1500秒。你想使用：

$("#div-id").css("background-color","rgb(x, y, 0)");

设置颜色的背景，其中x和y应介于0到255之间。

如果以秒为单位的当前计数为1500，我们希望x = 255且y = 0.如果计数为0，我们希望x = 0且y = 255。

当计数为1500时，我们需要找到我们将计数乘以得到255的线性因子。

1500 * factor = 255
factor = 0.17

因此，如果在每次计数时，我们乘以0.17，我们将得到一个介于0到255之间的数字，用于rgb背景颜色中的红色。

1500*0.17 = 255
750 * 0.17 = 127.5
0 * 0.17 = 0

这适用于红色。对于绿色，我们想要扭转行为。在1500，我们希望值为0。

(1500-curCount) * 0.17 = greenVal

如果curCount = 1500，我们得到一个greenVal为0.如果curCount为0，我们得到一个255的greenVal。如果curCount是750，我们得到一个127.5的greenVal。

因此，每次减少计数时，使用上面显示的两个等式计算绿色和红色值，并使用上面的jquery语句将div的背景颜色设置为生成的颜色。

根据倒计时更改div的颜色

3 个答案: