Javascript 如何使文本在x时间后更改颜色
我目前有一个计时器,但我有一个css问题。基本上我想要的是当计时器达到30秒时,让数字变成红色。 这是我的密码Javascript 如何使文本在x时间后更改颜色,javascript,jquery,css,Javascript,Jquery,Css,我目前有一个计时器,但我有一个css问题。基本上我想要的是当计时器达到30秒时,让数字变成红色。 这是我的密码 $(function () { var $startTimer = $('#startTimer'); var $timerDisplay = $('#timerDisplay'); var time = 120; $timerDisplay.hide(); $startTimer.click(function () { $startTimer.prop('disabled', t
$(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
启动计时器
这是计时器的工作代码笔,但不是颜色变化
对您的
剩余时间使用简单的条件检查,更改元素的“color”
属性。比如:
$timerDisplay.css("color", (timeRemaining > 30 ? "initial" : "red"));
或者,如果您希望它更简单:
if(timeRemaining <= 30)
$timerDisplay.css("color", "red");
if(剩余时间)
if(timeRemaining <= 30)
$timerDisplay.css("color", "red");