我想在页面上每 3 秒更改一次颜色而不刷新答案

【问题标题】：I want change the colors every 3 seconds on the page without refresh我想在页面上每 3 秒更改一次颜色而不刷新
【发布时间】：2020-07-13 08:32:38
【问题描述】：

我希望页面上的颜色每 3 秒自动更改一次而不刷新，就像有人每 3 秒自动刷新一次一样。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color Blocks</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body id="color">

<script src="js/script.js"></script>
</body>
</html>

CSS：

#color div {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
}

JavaScript：

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 style="background-color:' + rgbColor + '"></div>';
}

document.write(html);

【问题讨论】：

你试过 setInterval() 吗？

标签： javascript html css

【解决方案1】：

您可以保存对每个元素的引用，然后使用 setInterval() 每 3 秒更新一次颜色

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 */
}

【讨论】：

【解决方案2】：

换行

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

【讨论】：

Nico - Schulz，它运行良好，但我不明白代码背后的逻辑
那么您首先使用您的代码来创建元素并赋予它们第一种颜色。然后在 changeColor 函数中，我得到所有具有“颜色元素”类的元素，我告诉你要穿上这些元素。然后我用 for 循环遍历所有元素。对于每个元素，我们都会生成一个新的随机颜色，并将其用于已经存在的元素。通过 SetInterval 函数，我们确保它每 3 秒（3000 毫秒）运行一次，我希望这会有所帮助 :) 如果您对我的代码的一部分有特定的问题，我可能会提供更好的帮助

【解决方案3】：

我会考虑一个带有过滤器的 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);
  }
}

【讨论】：