2
В приведенном ниже коде я меняю цвет фона в зависимости от секунд, оставшихся в таймере. Я пытаюсь выяснить, есть ли способ изменить фоновое изображение на основе времени.Изменение фонового изображения на основе времени (javascript)
Я попытался добавить следующее:
var imgArray = ['something.jpg', 'something2.jpg'];
function changeColor(){
\t if (seconds <= 300 && seconds > 90) {
\t \t document.body.style.background = imgArray[0];
\t }
\t else if (seconds <= 90 && seconds > 30) {
\t \t document.body.style.background = imgArray[1];
\t }
\t else (seconds <= 30 && seconds >= 0) {
\t document.body.style.background = imgArray[0];
\t }
};Это, однако, не работает. Я не уверен, что я делаю неправильно. Ниже мой полный код:
var seconds = 300; //Variables for the code below
var countdownTimer;
var colorChange; //sets up array of colors
colorChange = ['#7ed473', '#fff194', '#fa8283', 'white']
function secondPassed(){
\t var minutes = Math.floor(seconds/60); //takes the output of seconds/60 and makes rounds it down. 4.7 = 4, 3.7 = 3. (to keep the minutes displaying right)
\t var remainingSeconds = seconds % 60; //takes remainder of seconds/60 and displays it. so 270/60 = 4.5 this displays it as 30 so it becomes 4:30 instead of 4.5
\t if (remainingSeconds < 10) { //if remaining seconds are less than 10 add a zero before the number. Displays numbers like 09 08 07 06
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; //displays time in the html page 5:06
document.getElementById('countdown2').innerHTML = minutes + ":" + remainingSeconds; //displays the time a second time
if (seconds == 0) {
\t \t clearInterval(countdownTimer); //keeps value at zero once it hits zero. 0:00 will not go anymore
\t \t alert("Time is Up, Try again");
\t \t }
};
function changeColor(){ //this changes the background color based on the time that has elapsed
\t if (seconds <= 300 && seconds > 90) { //green between 5:00 - 1:30
\t \t document.body.style.background = colorChange[0];
\t }
\t else if (seconds <= 90 && seconds > 30) { //yellow between 1:30 - 30
\t \t document.body.style.background = colorChange[1];
\t }
\t else if(seconds <= 30 && seconds >= 0){ // red between 30 - 0
\t document.body.style.background = colorChange[2];
\t }
};
\t
function countdown(start){ //code for the button. When button is clicked countdown() calls on secondPassed() to begin count down.
\t secondPassed();
\t if (seconds != 0) { //actual code to decrement the time
\t seconds --;
\t countdownTimer = setTimeout('countdown()', 1000);
\t changeColor(); //calls the changeColor() function so that background changes
\t start.disabled = true; //disables the "start" button after being pressed
\t }
\t if (start.disabled = true){ //if one of the 'start' buttons are pressed both are disabled
\t start2.disabled = true;
\t }
};
function cdpause() { //pauses countdown
// pauses countdown
clearTimeout(countdownTimer);
};
function cdreset() {
// resets countdown
cdpause(); //calls on the pause function to prevent from automatically starting after reset
secondPassed(); //reverts back to original secondPassed() function
\t \t document.getElementById('start').disabled = false; //Enables the "start" button that has been disabled from countdown(start) function.
\t \t document.getElementById('start2').disabled = false; //enables the 'start2' button. same as above.
\t \t document.body.style.background = colorChange[3]; //Resets background color to white.
};
\t<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="newTicket2.0.css">
<script src = "Timer2.js">
</script>
</head>
<body onload = "cdreset()">
<div id = "timerBackground">
<span id="countdown" class="timer"></span>
<div id = "timerButtons">
<input type="button" value="Start" onclick="countdown(this)" id = "start">
<input type="button" value="Stop" onclick="cdpause()">
<input type="button" value="Reset" onclick="cdreset(seconds = 300)">
</div>
</div>
<div id = "timerBackground2">
<span id="countdown2" class="timer"></span>
<div id = "timerButtons2">
<input type="button" value="Start" onclick="countdown(this)" id = "start2">
<input type="button" value="Stop" onclick="cdpause()">
<input type="button" value="Reset" onclick="cdreset(seconds = 300)">
</div>
</div>
</body>
</html>Мой вопрос, как я могу получить код, чтобы изменить фоновое изображение, а не только изменение цвета?
Большое спасибо, человек. Прекрасно работает. –