我不知道如何正确表达,但我有一个倒计时,我希望随着计时器倒计时,颜色逐渐从绿色变为红色(如果有意义的话,就像渐变一样)。因此,当时间达到 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”后开始变化。
编辑:我最终想添加更改倒计时分钟数的功能。
最佳答案
您可以使用 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 中的时间更改为更短并且更容易看到结果。
关于javascript - 根据倒计时改变div的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39298719/