Как изменить цвет дисплея?

Это очень простой таймер, но мне было интересно, есть ли способ изменить цвет дисплея на красный, когда таймер достигнет 10 секунд. Я попытался разместить этот код в разных местах javascript, чтобы попытаться поместить класс внутри элемента, но он просто прикручивает его.Как изменить цвет дисплея?

if (secondsRemaining <== 10) { 
    timeDisplay.className += "red"; 
}

Вот мой JavaScript:

var secondsRemaining; 
    var intervalHandle; 

    function resetPage() { 
    document.getElementById("inputArea").style.display = "block"; 
    } 

    function tick() { 

    var timeDisplay = document.getElementById("time"); 
    var min = Math.floor(secondsRemaining/60); 
    var sec = secondsRemaining - (min * 60); 

    if (sec < 10) { 
     sec = "0" + sec; 
    } 

    var message = min + ":" + sec; 

    timeDisplay.innerHTML = message; 

    if (secondsRemaining === 0) { 
     alert("Done!"); 
     clearInterval(intervalHandle); 
     resetPage(); 
    } 
    // subtracts seconds remaining 
    secondsRemaining--; 

    } 

    function startCountdown() { 

    var minutes = document.getElementById("minutes").value; 

    if (isNaN(minutes)) { 
     alert("Please enter a number"); 
     return; 
    } 

    if (minutes == "") { 
     alert("Please enter a number"); 
     return; 
    } 

    secondsRemaining = minutes * 60; 
    intervalHandle = setInterval(tick, 1000); 

    document.getElementById("inputArea").style.display = "none"; 
    } 

    window.onload = function() { 

    var inputMinutes = document.createElement("input"); 
    inputMinutes.setAttribute("id", "minutes"); 
    inputMinutes.setAttribute("type", "text"); 

    var startButton = document.createElement("input"); 
    startButton.setAttribute("type", "button"); 
    startButton.setAttribute("value", "Start Countdown"); 
    startButton.onclick = function() { 
     startCountdown(); 
    }; 

    document.getElementById("inputArea").appendChild(inputMinutes); 
    document.getElementById("inputArea").appendChild(startButton); 
    };

HTML:

<!DOCTYPE HTML> 
<html> 

<head> 
<title>Countdown</title> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
<div id="container"> 
    <div id="inputArea"></div> 
    <h1 id="time">0:00</h1> 
</div> 
<script src="script.js"></script> 
</body> 

</html>

CSS:

body { 
    font-family: Roboto; 
    font-size: 100% 
    color: rgb(33, 33, 33); 
} 

#container { 
    width: 400px; 
    margin: auto; 
} 

#time { 
    font-size: 100px; 
} 


.red { 
    color: red; 
}

источник

2016-11-29 userSufyan

Используйте функцию проверки элементов в вашем браузере, чтобы узнать, установлен ли класс –

У вас есть правильная идея! В вашем коде есть только небольшая ошибка:

Когда вы пытаетесь установить timeDisplay.className, не забудьте добавить пробел перед тем, как новый класс будет добавлен - в противном случае он будет добавляться неправильно.

Рассмотрим:

"oldClass" + "red" // => "oldClassred" bad 
// vs. 
"oldClass" + " red" // => "oldClass red" good

Так что вам просто нужно добавить пробел перед red здесь:

Другой опечатка было ваше сравнение равенство: <== должно быть просто <=.

if (secondsRemaining <= 10) { 
    timeDisplay.className += " red"; 
}

источник

2016-11-29 01:31:14

awesome, thanks! плохо дать ему выстрел – userSufyan

@userSufyan Рад я мог бы помочь! –

Как изменить цвет дисплея?

ответ

Смежные вопросы