изменение цвета фона страницы с помощью массива и цикла - PullRequest
Новая
       0

изменение цвета фона страницы с помощью массива и цикла

1 голос
/ 10 апреля 2020

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

var colorss = ["red", "blue", "green","maroon","yellow"];
    
    for (i=0;i<colorss.length;i+=1) {
        
        
            document.body.setAttribute('style',"background-color:" + colorss[i]);
            
        
        
    }

Ответы [ 2 ]

1 голос
/ 10 апреля 2020

Это то, что вы имеете в виду? 

jQuery(function($) {
  function changeColor(selector, colors, time) {
    var curCol = 0,
      timer = setInterval(function() {
        if (curCol === colors.length) curCol = 0;
        $(selector).css("background-color", colors[curCol]);
        curCol++;
      }, time);
  }
  $(window).load(function() {
    changeColor(".container", ["green", "yellow", "blue", "red"], 3000);
  });
});
.container {
  background-color: red;
  height: 500px;
  -webkit-transition: background-color 0.5s ease-in-out;
  -moz-transition: background-color 0.5s ease-in-out;
  -o-transition: background-color 0.5s ease-in-out;
  -khtml-transition: background-color 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container"></div>

ИЛИ

с использованием только CSS: 

html,
body {
  height: 100%;
}

body {
  -webkit-animation: background 5s cubic-bezier(1, 0, 0, 1) infinite;
  animation: background 5s cubic-bezier(1, 0, 0, 1) infinite;
}

@-webkit-keyframes background {
  0% {
    background-color: #f99;
  }
  33% {
    background-color: #9f9;
  }
  67% {
    background-color: #99f;
  }
  100% {
    background-color: #f99;
  }
}

@keyframes background {
  0% {
    background-color: #f99;
  }
  33% {
    background-color: #9f9;
  }
  67% {
    background-color: #99f;
  }
  100% {
    background-color: #f99;
  }
}
0 голосов
/ 10 апреля 2020

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

также у вас есть s слишком много цветов document.body.setAttribute('style',"background-color:" + colors[i]);

здесь рабочий код, если вы хотите увидеть l oop

var colors = ["red", "blue", "green","maroon","yellow"];
let body = document.getElementById('body');

var i = 0;
function myLoop () {
   setTimeout(function () {
       document.body.setAttribute('style',"background-color:" + colors[i]);
      i++;
      if (i < colors.length) {
         myLoop();
      }
   }, 1500) /*1.5 seconds*/
}
myLoop();
<body>
<h1>hello</h1>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...