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

Question

我希望頁面上的 colors 每 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);

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

Answer 2

換行

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

至

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

所以你會有一個標識符

然后創建以下 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;
    }
}

現在讓它像這樣每 3 秒運行一次 function

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

Answer 3

我會考慮使用帶有過濾器的 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