Я хочу менять цвета на странице каждые 3 секунды без обновления - PullRequest
Новая
       6

Я хочу менять цвета на странице каждые 3 секунды без обновления

0 голосов
/ 13 июля 2020

Я хочу, чтобы цвета на странице менялись автоматически каждые 3 секунды без обновления sh, как если бы кто-то обновлял sh автоматически каждые 3 секунды. enter image description here

HTML:

<!DOCTYPE html>
  Цветные блоки

Ответы [ 3 ]

0 голосов
/ 13 июля 2020

измените строку 

html += '<div style="background-color:' + rgbColor + '"></div>';

на 

html += '<div class="color-element" style="background-color:' + rgbColor + '"></div>';

, чтобы у вас был идентификатор

, затем создайте следующую функцию 

function changeColors {
    var colorElements = document.getElementsByClassName("color-element");
    for (i = 0; i < colorElements.length; i++) {
        var item = colorElements[i];
        red = randomColor();
        green = randomColor();
        blue = randomColor();
        rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
        item.style.backgroundColor = rgbColor;
    }
}

теперь, чтобы функция запускалась каждые 3 секунды вот так 

window.setInterval(function(){
    changeColors();
}, 3000);
0 голосов
/ 13 июля 2020

Я бы рассмотрел анимацию CSS с фильтром для изменения цвета: 

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

var html = '';
var red;
var green;
var blue;
var rgbColor;

for (i = 0; i < 1000; i++) {
  red = randomColor();
  green = randomColor();
  blue = randomColor();
  rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
  html += '<div class="box" style="background-color:' + rgbColor + '"></div>';
}

document.write(html);
div.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
  animation:change 3s linear infinite;
}

@keyframes change{
  0%,33% {
     filter:hue-rotate(0);
  }
  34%,66% {
     filter:hue-rotate(60deg);
  }
  67%,100% {
     filter:hue-rotate(120deg);
  }
}
0 голосов
/ 13 июля 2020

Вы можете сохранить ссылку на каждый элемент, а затем обновлять цвет каждые 3 секунды с помощью setInterval()

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

function getRGBColor() {
  return `rgb(${randomColor()}, ${randomColor()}, ${randomColor()})`;
}

const elements = [];

for (i = 0 ; i < 1000 ; i++) {
  // Create new element
  const element = document.createElement("div");
  element.style.background = getRGBColor();
   
  // Save a reference to the element
  elements.push(element);
  
  // Add element to the DOM
  document.body.appendChild(element);
}

setInterval(function() {
  // Update the color of every element
  for(element of elements) {
    const rgbColor = `rgb(${randomColor()}, ${randomColor()}, ${randomColor()})`;
    element.style.background = getRGBColor();
  };
}, 3000); // Execute every 3000 milliseconds (3 seconds)
div {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
  transition: background-color 0.25s ease-in-out; /* makes color change smooth */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...