I want change the colors every 3 seconds on the page without refresh
I want the colors on the page change automatically every 3 seconds without refresh , like someone do refresh automatically every 3 seconds. 
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); 
You could save a reference to every element and then update the color every 3 seconds with 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 */ }
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 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
window.setInterval(function(){ changeColors(); }, 3000); 
I would consider a CSS animation with a filter to change the 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); } }
