Untitled
unknown
plain_text
2 years ago
2.2 kB
4
Indexable
<!DOCTYPE html> <html> <head> <style> .box { width: 50px; height: 50px; margin: 5px; display: inline-block; background-color: blue; } </style> </head> <body> <div id="container"></div> <script> // Create the grid var container = document.getElementById('container'); for (var i = 0; i < 5; i++) { for (var j = 0; j < 10; j++) { var box = document.createElement('div'); box.className = 'box'; container.appendChild(box); } container.appendChild(document.createElement('br')); } // Function to generate a random color function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } // Function to update box colors function updateColors() { var boxes = document.getElementsByClassName('box'); for (var i = 0; i < boxes.length; i++) { var box = boxes[i]; box.style.backgroundColor = getRandomColor(); } } // Interval to update colors every 1 second setInterval(updateColors, 1000); // Wave effect animation var wave = document.createElement('div'); wave.style.position = 'absolute'; wave.style.width = '100%'; wave.style.height = '100%'; wave.style.backgroundImage = 'radial-gradient(circle, transparent 10%, white 60%)'; wave.style.backgroundSize = '100% 100%'; wave.style.opacity = '0.3'; container.appendChild(wave); var scale = 1; var scaleDirection = 1; function animateWave() { if (scale <= 0.1 || scale >= 1) { scaleDirection *= -1; } scale += 0.1 * scaleDirection; wave.style.transform = 'scale(' + scale + ')'; requestAnimationFrame(animateWave); } animateWave(); </script> </body> </html>
Editor is loading...