Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   изменение цвета (https://javascript.ru/forum/dom-window/21784-izmenenie-cveta.html)

Александр х@к 23.09.2011 22:40

изменение цвета
 
<!DOCTYPE HTML>
<html>
<body>   
<a href="javascript:void(document.body.style.backgroundColor='White');">  Нажмите и фон и он изменится</a>
</body>
</html>


так вот что нужно чтоб фон изменялся
White-Honeydew-Azure-Seashell-OldLace-LavenderBlush

и менялся каждую 5сек,,а когда цвета кончатся, то начнут сначало.
думаю использовать setInterval

DjDiablo 23.09.2011 23:28

Спасибо, повесилил))))))))))
попробуй так)))


<!DOCTYPE HTML>
<html>
<body>   
<a href="javascript:void(document.body.style.backgroundColor='black');">  Нажмите и фон и он изменится</a>
</body>
</html>


upd: Эх зря вопрос поменял)

melky 23.09.2011 23:54

Цитата:

Сообщение от Александр х@к (Сообщение 127857)
думаю использовать setInterval

желаю удачи :)

всё верно, setInterval. мне легче было бы через таймаут

Александр х@к 24.09.2011 16:07

а как?

melky 24.09.2011 16:15

я бы для начала почитал учебник.

Александр х@к 24.09.2011 16:20

<!DOCTYPE HTML>
<html>
<body>   

  <script>

function op() { setTimeout("op9",5000); }

function op9() {  document.body.style.backgroundColor='White' setTimeout("op8()",speed); }

function op8() {  document.body.style.backgroundColor='Honeydew' setTimeout("op7()",speed); }

function op7() {  document.body.style.backgroundColor='Azure' setTimeout("op6()",speed); }

function op6() {  document.body.style.backgroundColor='Seashell' setTimeout("op6()",speed); }

function op5() {  document.body.style.backgroundColor='OldLace' setTimeout("op4()",speed); }

function op4() {  document.body.style.backgroundColor='LavenderBlush' setTimeout("op()",speed); }


  </script>
  
</body>
</html>


так???

Триви 24.09.2011 16:44

Ман читать нужно! 5 мин и все готово:

<body></body>
<script type="text/javascript">
colorArr = ['white', 'red', 'green', 'blue'];
var len = colorArr.length;
var i = 0;
(function() {
  document.body.style.backgroundColor = colorArr[i];
  i < len ? i++ : i = 0;
  setTimeout(arguments.callee, 1000);
})();
</script>


пи.пи. тут есть один косяк, я думаю, ты сам с ним справишься...
сорри, убегаю с семьёй в дельфиниум! ))

Александр х@к 24.09.2011 16:56

о класс, спс.
а можно сделать чтоб цвет, падал на другой,
например, щас белый(White) а на него сверху вниз падает (Honeydew) а на Honeydew сверху вниз Azure и так далее

Триви 24.09.2011 21:23

Цитата:

Сообщение от Александр х@к (Сообщение 127916)
о класс, спс.
а можно сделать чтоб цвет, падал на другой,
например, щас белый(White) а на него сверху вниз падает (Honeydew) а на Honeydew сверху вниз Azure и так далее

Можно, сколько платишь? :)
Ты даже не понял косяк с задержкой, а уже дальше лыжи навострил :D
Вот тебе правильный предыдущий вариант:

<body></body>
<script type="text/javascript">
(function() {
    var colorArr = ['red', 'green', 'blue'], len = colorArr.length, i = 0, delay;
    (function() {
        document.body.style.backgroundColor = colorArr[i];
        if (i < len) {
            delay = 1000, i++;
        } else {
            delay = 0, i = 0;
        }
        setTimeout(arguments.callee, delay);
    })();
})();
</script>

Триви 25.09.2011 16:08

Чтобы падало:

<style>
body {
  margin:0px;
  background: red;
}
div {
  width: 100%;
  height: 100%;
}
</style>

<body>
  <div></div>
</body>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

  var colorArr = ['red', 'green', 'blue'],
      len = colorArr.length-1, i = 1;

  $(function fallingColorBlocks() {

    var bodyColor = i > 0 ? colorArr[i-1] : colorArr[len];
    $("body").css({'background': bodyColor});

    $("div").css({'display': 'none', 'background': colorArr[i]}).slideDown(1500,function(){
      i < len ? i++ : i = 0;
      fallingColorBlocks();
    });

  });

});
</script>

Александр х@к 25.09.2011 17:55

<!DOCTYPE HTML>
<html>
<body>   
<q>White-Honeydew-Azure-Seashell-OldLace-LavenderBlush  </q>
<style>body {
  margin:0px;
  background: red;
}
div {
  width: 100%;
  height: 100%;
}
</style>
 
<body>
  <div></div>
</body>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
 
  var colorArr = ['white', 'Honeydew', 'Azure', 'Seashell', 'OldLace', 'LavenderBlush' ],
      len = colorArr.length-1, i = 1;
 
  $(function fallingColorBlocks() {
 
    var bodyColor = i > 0 ? colorArr[i-1] : colorArr[len];
    $("body").css({'background': bodyColor});
 
    $("div").css({'display': 'none', 'background': colorArr[i]}).slideDown(10000,function(){
      i < len ? i++ : i = 0;
      fallingColorBlocks();
    });
 
  });
 
});
</script>

</body>
</html>


получается если сверху, то закрывание начинается с отступом т.е. строка а под ней начинается падение(проверьте,мож плохо описал), как исправить чтоб за текстом изменение цвета тоже происходило

Триви 25.09.2011 19:10

Мда..... трудно жить без пистолета..
Вы даже разметку не знаете!
Думаю нет больше смысла вам отвечать..

yashka525 26.09.2011 06:18

Уже надоело читать Ваши темы! Вы просто тупо копируете чужой код и говорите: "А чо тут не пашет? А?" Изучите что-нибудь сами, а этот форум чтоб помогать людям которые учатся и прилагают усилия!

Цитата:

Сообщение от Триви
трудно жить без пистолета..

100 пудов!


Часовой пояс GMT +3, время: 09:38.