Question

在下面的代码中，我根据计时器中剩余的秒数更改背景颜色。我试图弄清楚是否有办法根据时间改变背景图像。

我试图添加以下内容：

＆＃13;

var imgArray = ['something.jpg', 'something2.jpg'];
function changeColor(){
	if (seconds <= 300 && seconds > 90) {
		document.body.style.background = imgArray[0];
	}
	else if (seconds <= 90 && seconds > 30) {
		document.body.style.background = imgArray[1];
	}
	else (seconds <= 30 && seconds >= 0) {
	document.body.style.background = imgArray[0];
	}
};

＆＃13;

然而，这不起作用。我不确定我做错了什么。以下是我的完整代码：

＆＃13;

var seconds = 300; //Variables for the code below
var countdownTimer;
var colorChange; //sets up array of colors
colorChange = ['#7ed473', '#fff194', '#fa8283', 'white']
function secondPassed(){
	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)
	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
	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) {
		clearInterval(countdownTimer);  //keeps value at zero once it hits zero. 0:00 will not go anymore
		alert("Time is Up, Try again");
		}
};

function changeColor(){ //this changes the background color based on the time that has elapsed
	if (seconds <= 300 && seconds > 90) {  //green between 5:00 - 1:30
		document.body.style.background = colorChange[0];
	}
	else if (seconds <= 90 && seconds > 30) { //yellow between 1:30 - 30
		document.body.style.background = colorChange[1];
	}
	else if(seconds <= 30 && seconds >= 0){ // red between 30 - 0
	document.body.style.background = colorChange[2];
	}
};
	
function countdown(start){ //code for the button. When button is clicked  countdown() calls on secondPassed() to begin count down.
	secondPassed();
	if (seconds != 0) { //actual code to decrement the time
	seconds --;
	countdownTimer = setTimeout('countdown()', 1000);
	changeColor();  //calls the changeColor() function so that background changes
	start.disabled = true; //disables the "start" button after being pressed
	}
	if (start.disabled = true){ //if one of the 'start' buttons are pressed both are disabled
	start2.disabled = true;
	}
};

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
		document.getElementById('start').disabled = false; //Enables the "start" button that has been disabled from countdown(start) function.
		document.getElementById('start2').disabled = false; //enables the 'start2' button. same as above.
		document.body.style.background = colorChange[3]; //Resets background color to white.
};

＆＃13;

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

＆＃13;

我的问题是如何让代码更改背景图片而不仅仅是改变颜色？

Answer 1

你需要在值周围设置url（..）背景。

<style>#vs_seal iframe{border:0 none;}</style>
<div id="vs_seal"></div>
<script type="text/javascript">
r(function() {
  var div = document.getElementById('vs_seal');
  var iframe = document.createElement('iframe');
  iframe.width = 118;
  iframe.height = 55;
  iframe.frameborder = 0;
  iframe.scrolling = "no";
  iframe.seamless = "true";
  iframe.src = 'about:blank';
  var content = '<!DOCTYPE html>'
  + '<head><title>Dynamic iframe</title>'
  + '<style>body{margin:0;padding:0;border:0;}</style></head>'
  + '<body><script type="text/javascript" src="//smarticon.geotrust.com/si.js">'
  + '<\/script><\/body><\/html>';
  div.appendChild(iframe);
  iframe.contentWindow.document.open('text/html', 'replace');
  iframe.contentWindow.document.write(content);
  iframe.contentWindow.document.close();

});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
</script>

根据时间更改背景图像（javascript）

1 个答案: