Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Смена цвета фона каждую секунду. (https://javascript.ru/forum/dom-window/55675-smena-cveta-fona-kazhduyu-sekundu.html)

shmihshmih 09.05.2015 14:42
Смена цвета фона каждую секунду.
 
Привет! Подскажите пожалуйста почему не работает скрипт?

var imagesi = [red,green,black,yellow,fuchsia];
var slider = document.getElementById("slider");
var innerslider = slider.style.bgColor;
for (var i = 0; i < imagesi.length; i++) {
function anon(step) {
var step;
step = imagesi[i];
return step;};}
function sliding() {
innerslider.step;
}
setInterval(sliding,1000);

Есть див #slider. Каждую секунду должен меняться цвет фона, а он не меняется. Подскажите как исправить?

Vlasenko Fedor 09.05.2015 15:45 
<style>#slider{width: 100px; height: 100px;}</style>
<body>
<div id="slider"></div>
<script>
window.onload = function () {
    var obj = {
        __colors: [],
        __position: 0,
        get color() {
            if (this.__position == this.__colors.length) this.__position = 0;
            return this.__colors[this.__position++];
        },
        set color(arg) {
            this.__colors = arg;
        }
    };
    obj.color = ['red', 'green', 'black', 'yellow', 'fuchsia'];
    setInterval(function () {
        document.getElementById('slider').style.backgroundColor = obj.color;
    }, 1000);
};
</script>
</body>

вариант :haha:

Decode 09.05.2015 15:58
Вариант №2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    #slider {
      width: 100px;
      height: 100px;
    }

    .color1 {
      background-color: red;
    }

    .color2 {
      background-color: green;
    }

    .color3 {
      background-color: black;
    }

    .color4 {
      background-color: yellow;
    }

    .color5 {
      background-color: fuchsia;
    }
  </style>
</head>
<body>
  <div id="slider"></div>
  
  <script>
    (function changeColor(currentNumber){
      currentNumber++;

      if(currentNumber >5){
        currentNumber = 1;
      }

      document.getElementById('slider').setAttribute('class', 'color' + currentNumber);

      setTimeout(function(){
        changeColor(currentNumber)
      }, 1000); 
    })(0);
  </script>
</body>
</html>

Magneto 10.05.2015 17:35
Или:
<html><head></head><body><script type="text/javascript">

var getNum = function() {return Math.floor(Math.random() * 256)};

setInterval(function() {
	document.body.style.backgroundColor = 'rgb(' + getNum() + ',' + getNum() + ',' + getNum() + ')';
}, 1000);

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

shmihshmih 11.05.2015 12:42
Спасибо)

LADYX 22.02.2020 18:10
Цитата:
Сообщение от Magneto
Или:
а если нужно не для body, а для какого-то блока (.block), то как правильно написать вместо "document.body"?

рони 22.02.2020 18:18
Цитата:
Сообщение от LADYX
то как правильно написать
:blink:
querySelector

LADYX 22.02.2020 18:23
рони,

прошу прощения, что-то я сам ступил))

Цитата:
Сообщение от LADYX
как правильно написать вместо "document.body"?
Отвечаю сам же на свой вопрос:

вместо:
document.body

пишем:
document.body.appendChild(block)

и добавляем:
var block = document.createElement('block');

всё же верно?

рони 22.02.2020 18:26
Цитата:
Сообщение от LADYX
всё же верно?
вам виднее, иначе пишите код полностью.

LADYX 22.02.2020 18:33
Цитата:
Сообщение от рони
вам виднее, иначе пишите код полностью.
рони,
да-да, всё работает, не буду вас лишний раз напрягать по таким глупым пустякам)) Прошу прощения


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