javascript - 根据剩余时间改变颜色

Question

我想知道是否有一种简单的方法可以更改倒计时计时器的颜色（我希望计时器上的颜色在剩下不到 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);
}

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

Answer 1

只需添加以下行：

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

JS 小提琴演示。

如果还剩0 天且少于 12 小时，则将color包含元素的'red'

虽然我建议缓存你正在使用的元素一次然后使用that，而不是每次都重新查询 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 小提琴演示。