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 Fiddle demo

如果和零天不到十二小时，那么将包含元素的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 Fiddle demo

根据剩余时间改变颜色

1 个答案: