根据剩余时间更改颜色

Change color depending on remaining time

本文关键字：颜色 时间 余时间      更新时间：2023-09-26

我想知道是否有一种简单的方法可以更改倒数计时器上的颜色（我希望计时器上的颜色在剩余不到 12 小时后变为红色）

    CountDownTimer('09/09/2013 23:59', 'countdown');
    CountDownTimer('09/11/2013 15:30', 'countdown2');

function CountDownTimer(dt, id)
{
    var end = new Date(dt);
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;
    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {
            clearInterval(timer);
            document.getElementById(id).innerHTML = '<span class=exp>Utgått!</span>';
            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);
        document.getElementById(id).innerHTML = days + ' Dager ';
        document.getElementById(id).innerHTML += hours + ' Timer   ';
        document.getElementById(id).innerHTML += minutes + ' Minutter  ';
    }
    timer = setInterval(showRemaining, 1000);
}

这是我正在使用的代码。提前，谢谢你:)

只需添加以下行：

document.getElementById(id).style.color = days === 0 && hours < 12 ? 'red' : '';

JS小提琴演示。

如果剩余天数为

零且少于 12 小时，则将包含元素的color设置为 'red'，如果还剩下一个或多个天或十二小时或更多小时，则将其设置为无（传递空字符串）。

虽然我建议缓存你正在使用的元素一次然后使用它，而不是每次都重新查询 DOM：

var cachedEl = document.getElementById(id);
/* all the other stuff... */
cachedEl.innerHTML = days + ' Dager ';
cachedEl.innerHTML += hours + ' Timer   ';
cachedEl.innerHTML += minutes + ' Minutter  ';
cachedEl.innerHTML += seconds + ' Seconds.  ';
cachedEl.style.color = days === 0 && hours < 12 ? 'red' : '';

JS小提琴演示。

相关文章：