发表新帖
发表新帖

Change background color between red and green every second

前端 未结
关注
10 1200
终归单人心
终归单人心 2020-12-19 16:10

I\'m trying to make a webpage change the background color every one second using JavaScript. I\'m using setTimeout but I can\'t figure out how to get my variabl

相关标签:
10条回答
  • 野的像风
    2020-12-19 16:33

    If you expect the browser to support CSS animations, you can so something more interesting and perhaps less annoying. Define in your style sheet:

    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 standard yet, so those hinge on prefixes, hence I had to repeat for -moz- and -webkit-. It doesnt work on Opera and IE, for now.

    0 讨论(0)
  • 迷失自我
    2020-12-19 16:34

    Blink fiddle:

    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 keep the state out of the global scope. Uses setInterval instead of setTimeout for repeated calling, although that may not be convenient. Both setInterval and setTimeout return a handle you can save and use to stop the timer, if you want, but since you didn't ask about that, I left it out for simplicity.

    The function just defines an anonymous callback that toggles a boolean and sets the color of a test div.

    0 讨论(0)
  • 日久生厌
    2020-12-19 16:36

    Also, consider doing it with 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;
}
    0 讨论(0)
  • 萌比男神i
    2020-12-19 16:37

    I have created this function called toggle_colour for the very 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. Like,

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

    You can check the complete demo and more advanced toggle color functions in the article, Changing background color every X seconds in Javascript

    Disclaimer: I am the author of this tutorial article.

    0 讨论(0)
  • 天命终不由人
    2020-12-19 16:38

    I would advice not to do this, since it might be pretty 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'm not answering the question right...this code will change the background from blue to green every second repeatedly for an infinite amount of time. (What I mean is that I kinda redid your code rather than explaining what was wrong with yours...)

    0 讨论(0)
  • 醉梦人生
    2020-12-19 16:39

    You should definetly read some basic JavaScript tutorial or book. I am also new to JavaScript but some reading has helped. Here http://www.w3schools.com/js/ you can find some good stuff as reference.

    This 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 a lot i recommend JQuery

    0 讨论(0)
 看不清?
提交回复
热议问题