All geek questions in one place

Background color changes between red and green every second

I am trying to make a webpage change the background color every second using JavaScript. I am using setTimeout , but I cannot figure out how to make a variable change in a function. Here is my code:

  <!DOCTYPE html> <html> <head> <script type="text/javascript"> function changecolors() { x = 1; // <-- I know this is wrong, I just don't know where to place it var t = setTimeout("change()", 1000); } function change() { while(x < 3) { if(x = 1) { color = "red"; x++; } else if (x = 2) { color = "green"; x = 1; } document.body.style.background = color; } } </head> <body onload="changecolors()"> </body> </html>
+4
source share
10 answers

There are several issues here. I will just fix my code:

 var x; function changecolors() { x = 1; setInterval(change, 1000); } function change() { if (x === 1) { color = "red"; x = 2; } else { color = "green"; x = 1; } document.body.style.background = color; }

Mostly...

  • You need setInterval instead of setTimeout . setTimeout is executed only once.
  • = assigns, even in an if . You need == (or better === ).
  • You should not pass a string to setTimeout or setInterval . Pass a function instead.

One more note: you should not use the on* attributes of HTML elements for event listeners, but especially not on <body> , since you can do this in JavaScript instead and be unobtrusive:

 window.onload = changecolors;

Of course, you could do this with fewer features and without polluting the global namespace .

+13
source

Flashing violin:

http://jsfiddle.net/GolezTrol/R4c5P/1/

Uses this function:

 function initBlink() { var state = false; setInterval(function() { state = !state; var color = (state?'red':'green'); document.getElementById('test').style.color = color; }, 1000); }

Uses closure to save state from global scope. Uses setInterval instead of setTimeout to call again, although this may be inconvenient. Both setInterval and setTimeout return a handle that you can save and use to stop the timer if you want, but since you did not ask about it, I left it for simplicity.

The function simply defines an anonymous callback that switches the boolean and sets the color of the test div.

+6
source

Also consider using CSS. Demo

 @-webkit-keyframes blink { 0% { background:red; } 50% { background:green;} 100% { background:red; } } @-moz-keyframes blink { 0% { background:red; } 50% { background:green;} 100% { background:red; } } @-ms-keyframes blink { 0% { background:red; } 50% { background:green;} 100% { background:red; } } body{ -webkit-animation: blink 1s infinite; -moz-animation: blink 1s infinite; -ms-animation: blink 1s infinite; }
+5
source

If you expect the browser to support CSS animations, you can do something more interesting and perhaps less annoying. Define in the stylesheet:

 body { -webkit-animation: changebg 1s infinite cubic-bezier(1,0,0,1); -moz-animation: changebg 1s infinite cubic-bezier(1,0,0,1); animation: changebg 1s infinite cubic-bezier(1,0,0,1); } @-moz-keyframes changebg { 0% {background-color: #f00;} 50% {background-color: #fff;} 100% {background-color: #f00;} } @-webkit-keyframes changebg { 0% {background-color: #f00;} 50% {background-color: #fff;} 100% {background-color: #f00;} } @keyframes changebg { 0% {background-color: #f00;} 50% {background-color: #fff;} 100% {background-color: #f00;} }

And you're done, without JavaScript at all. Unfortunately, CSS animations are not yet standard, so they depend on prefixes, so I had to repeat for -moz- and -webkit- . At the moment, it does not work in Opera and IE.

+2
source

x = 1; sets x to 1, even in an if . Use x == 1 in if to keep the value of your variable intact.

+1
source

The first is:

 if (x = 1){

Must be:

 if(x == 1) {

Your statement sets x to 1, not checking if it is 1.

+1
source

I would advise against doing this because it can be quite annoying, but this should work:

 var x = false; function changecolors(){ var color=(x)?"green":"red"; // If X == true, then set to green, if false then blue document.body.style.background = color; // Set color x=!x; // Invert X }

And then in the body:

 <body onload="setInterval(changecolors,1000)">

PS: Sorry if I do not answer the question correctly ... this code will change the background from blue to green every second several times for an infinite amount of time. (I mean, I kind of edited your code, not explaining what's wrong with you ...)

+1
source

You should definitely read the basic JavaScript tutorial or book. I am also new to JavaScript, but some readings have helped. Here http://www.w3schools.com/js/ you can find some good stuff as a reference.

That should do the trick

 <!DOCTYPE html> <html> <head> <script type="text/javascript"> function change_color(flag){ var color = null; if (flag === true){ var color = "red"; }else{ var color = "green"; } document.body.style.background = color; flag = !flag var t=setTimeout(function(){change_color(flag)},1000); } </script> </head> <body onload="change_color(true)"> </body>

If you are going to manipulate the DOM, I recommend jQuery

+1
source

Your code is missing the closing </script> and other issues mentioned above.

Find the corrections below for your code that removes the global variable.

  <html> <head> <script type="text/javascript"> function changecolors() { var t = setInterval('change()',1000); } function change() { var color = document.body.style.background; if(color == "red") { document.body.style.background = "green"; } else { document.body.style.background = "red"; } } </script> </head> <body onload="javascript:changecolors()"> </body> </html>
0
source

I created this function called toggle_colour for the same purpose.

 function toggle_color(color1, color2, cycle_time, wait_time) { setInterval(function first_color() { document.body.style.backgroundColor = color1; setTimeout(change_color, wait_time); }, cycle_time); function change_color() { document.body.style.backgroundColor = color2; } }

Now you can simply copy the above code and call the function with two color codes. How,

 toggle_color("#61beb3", "#90a2c6", 4000, 2000);

You can check out the full demo and more advanced color switching feature in the article, Changing the background color every X seconds in Javascript

Disclaimer: I am the author of this tutorial.

0
source

Source: https://habr.com/ru/post/1382794/

More articles:


All Articles