Меняйте цвет фона между красным и зеленым каждую секунду - PullRequest
Новая
       3

Меняйте цвет фона между красным и зеленым каждую секунду

4 голосов
/ 24 ноября 2011

Я пытаюсь заставить веб-страницу менять цвет фона каждую секунду, используя JavaScript.Я использую setTimeout, но я не могу понять, как заставить мою переменную измениться в функции.Вот мой код: 

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

Ответы [ 10 ]

14 голосов
/ 24 ноября 2011

Здесь есть несколько проблем. Я просто исправлю твой код: 

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

В основном ...

  • Вам нужно setInterval вместо setTimeout. setTimeout выполняется только один раз.
  • = присваивает, даже в выражении if. Вам нужно == (или лучше, ===).
  • Вы не должны передавать строку в setTimeout или setInterval. Вместо этого передайте функцию.

Еще одно замечание: вам не следует использовать атрибуты on* элементов HTML для прослушивателей событий, но особенно не для <body>, поскольку вы можете сделать это вместо JavaScript и быть ненавязчивым: 

window.onload = changecolors;

Конечно, вы можете сделать это с меньшим количеством функций и без загрязнения глобального пространства имен .

6 голосов
/ 24 ноября 2011

Мигает скрипка:

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

Использует эту функцию: 

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

Использует закрытие для сохранения состояния вне глобальной области видимости. Использует setInterval вместо setTimeout для повторного вызова, хотя это может быть не удобно. И setInterval, и setTimeout возвращают дескриптор, который вы можете сохранить и использовать для остановки таймера, если хотите, но поскольку вы не спрашивали об этом, я упустил его для простоты.

Функция просто определяет анонимный обратный вызов, который переключает логическое значение и устанавливает цвет тестового элемента div.

5 голосов
/ 24 ноября 2011

Также рассмотрите возможность сделать это с помощью CSS. Демо . 

@-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;
}
2 голосов
/ 24 ноября 2011

Если вы ожидаете, что браузер будет поддерживать CSS-анимацию, вы можете сделать что-то более интересное и, возможно, менее раздражающее.Определите в своей таблице стилей: 

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

И все готово, без JavaScript вообще.К сожалению, CSS-анимации пока не являются стандартными, поэтому они зависят от префиксов, поэтому мне пришлось повторить для -moz- и -webkit-.Пока не работает в Opera и IE.

1 голос
/ 24 ноября 2011

Вы должны обязательно прочитать какой-нибудь базовый учебник или книгу по JavaScript. Я также новичок в JavaScript, но некоторые чтения помогли. Здесь http://www.w3schools.com/js/ вы можете найти некоторые полезные вещи для справки.

Это должно сработать 

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

Если вы собираетесь много манипулировать DOM, я рекомендую JQuery

1 голос
/ 24 ноября 2011

Я бы посоветовал не делать этого, так как это может быть довольно раздражающим, но это должно работать: 

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
}

А затем в теле: 

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

PS: Извинитеесли я не отвечаю на вопрос правильно ... этот код будет менять фон с синего на зеленый каждую секунду многократно в течение бесконечного времени.(Я имею в виду, что я переделал ваш код, а не объяснил, что с вами не так ...)

1 голос
/ 24 ноября 2011

С одной стороны, это: 

if (x = 1){

Должно быть так: 

if(x == 1) {

Ваше утверждение устанавливает x в 1, а не проверяет его на 1.

1 голос
/ 24 ноября 2011

x = 1; присваивает x значение 1, даже в операторе if. Используйте x == 1 в if операторах, чтобы сохранить значение вашей переменной без изменений.

0 голосов
/ 21 июля 2015

Я создал эту функцию с именем toggle_colour для той же цели. 

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

Теперь вы можете просто скопировать приведенный выше код и вызвать функцию с двумя цветовыми кодами. Мол, 

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

Вы можете проверить полную демонстрацию и более продвинутые функции переключения цвета в статье, Изменение цвета фона каждые X секунд в Javascript

Отказ от ответственности: я являюсь автором этой учебной статьи.

0 голосов
/ 24 ноября 2011

В вашем коде отсутствует закрывающий тег </script> и другие проблемы, упомянутые выше.

Найдите ниже исправление вашего кода, которое удаляет глобальную переменную. 

 <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...