我想在页面上每 3 秒更改一次 colors 而无需刷新

Question

I want the colors on the page change automatically every 3 seconds without refresh, like someone do refresh automatically every 3 seconds.我希望页面上的 colors 每 3 秒自动更改一次而不刷新，就像有人每 3 秒自动刷新一次一样。

HTML: 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: CSS：

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

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

Answer 1

You could save a reference to every element and then update the color every 3 seconds with setInterval()您可以保存对每个元素的引用，然后使用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 */ }

Answer 2

change the line换行

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

to至

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

so you will have an identifier所以你会有一个标识符

then create the following function然后创建以下 function

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

now to make it so the function is run every 3 seconds like this现在让它像这样每 3 秒运行一次 function

window.setInterval(function(){
    changeColors();
}, 3000);

Answer 3

I would consider a CSS animation with a filter to change the colors:我会考虑使用带有过滤器的 CSS animation 来更改 colors：

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

我想在页面上每 3 秒更改一次 colors 而无需刷新

问题描述

3 个解决方案

解决方案1
0 2020-07-13 08:43:31

解决方案2
0 2020-07-13 08:43:38

解决方案3
0 2020-07-13 08:53:04

我想在页面上每 3 秒更改一次 colors 而无需刷新

问题描述

3 个解决方案

解决方案1 0 2020-07-13 08:43:31

解决方案2 0 2020-07-13 08:43:38

解决方案3 0 2020-07-13 08:53:04

解决方案1
0 2020-07-13 08:43:31

解决方案2
0 2020-07-13 08:43:38

解决方案3
0 2020-07-13 08:53:04