How do i change the background color using javascript
Question
I was expecting this code to run but didn't work. Can someone please tell me what is wrong with this code... Thanks
<script>
var color = ["red","green","pink"];
function changeBackground(){
for(var i=0; i<color.length; i++){
document.body.style.background = color[i];
if(i == color.length){
i = 0;
}
}
}
setInterval(changeBackground, 1000);
</script>
3 answers
solution1
1 2016-04-21 00:10:21
What the above code does is: for every second, run the function changeBackground , which loop through and change the background three times (quickly).
The following code should work:
<script>
var color = ["red","green","pink"];
var index = 0;
function changeBackground(){
document.body.style.background = color[index];
index = index + 1;
if(index == color.length){
index = 0;
}
}
setInterval(changeBackground, 1000);
</script>
solution2
1 2016-04-21 00:13:14
I assume you're expecting your code to cause the background to rotate from red, to green, to pink, making one step every second, and then go back to pink. But what's actually happening is it's getting set to pink and then staying there, right?
That's because you have a bit of a misunderstanding of how setInterval works. Let's first look at your changeBackground function in isolation:
var color = ["red","green","pink"];
function changeBackground () {
for(var i = 0; i < color.length; i++){
document.body.style.background = color[i];
if (i == color.length) {
i = 0;
}
}
}
A couple of things to note about this: first, your conditional if (i == color.length) is never going to resolve to true . That's because the loop will only execute if i < color.length .
Second, this loop is going to execute very quickly. So quickly that it will set your background color to red, then to green, then to pink before you even notice, so all you see is a pink background. Which is exactly what's happening.
Then, you're calling this function once a second. But every time you call it, it does the exact same thing: it changes your background color so quickly you can't even see it, and then leaves it on pink.
However! I wouldn't recommend you try to do something like change the conditional to if (i == color.length - 1) , because that will create an infinite loop and likely crash your browser. What you really want is to call something that changes the background color just once, and does it differently each time.
solution3
-1 2016-04-21 00:12:55
With jQuery, it is always easier for DOM selector
$(document).ready(function(){ var color = ["red","green","pink"]; function changeBackground(){ for(var i=0; i<color.length; i++){ $('body').css('background-color', color[i]); if(i == color.length){ i = 0; } } } setInterval(changeBackground, 1000); });
<html> <title>Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="app.js"></script> </head> <body> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.