如何使文本在x時間后更改顏色

Question

我目前有一個可以使用的計時器，但是我有一個CSS問題。 基本上我想要的是當計時器達到30秒時，數字變為紅色。 這是我的代碼

$(function () {
var $startTimer = $('#startTimer');
var $timerDisplay = $('#timerDisplay');
var time = 120;

$timerDisplay.hide();

$startTimer.click(function () {
$startTimer.prop('disabled', true);
$timerDisplay.show();
var timeRemaining = time;
 var intervalId = setInterval(function () {
 var timeStamp = Math.floor(timeRemaining/60) + ':' +    timeRemaining%60;
   $timerDisplay.text(timeStamp);
     if (timeRemaining === 0) {
     clearInterval(intervalId);
    $timerDisplay.fadeOut();
    alert('Time is up, please submit a vote :)');
    $startTimer.prop('disabled', false);
    } else {
    timeRemaining--;
  }
}, 1000);
});
});

HTML

 <div id="timerDisplay"></div>
 <button id="startTimer">Start Timer</button>

這是計時器的工作代碼筆，但顏色沒有變化http://codepen.io/Chevex/pen/RNomGG

Answer 1

對timeRemaining使用簡單的條件檢查，更改元素的"color"屬性。 就像是：

$timerDisplay.css("color", (timeRemaining > 30 ? "initial" : "red"));

或者，如果您希望更簡單：

if(timeRemaining <= 30)
    $timerDisplay.css("color", "red");

http://codepen.io/anon/pen/pvrPey