首页用js生成三十种颜色不同的div色块css

用js生成三十种颜色不同的div色块css

时间: 2024-10-12 15:04:47 浏览: 26

javascript实现简单加载随机色方块

用碎片加载小方块实现简单的随机色块，直接上代码：效果图：具体代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8> <meta charset=utf-8> <title>koringz</title> <link rel=stylesheet href=css/demo.css> </head> <body> <div class=container> <div class=main> <div

在JavaScript中，你可以利用循环和随机数生成30种不同颜色的div元素，并设置它们的背景色。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .color-block { width: 50px; height: 50px; display: inline-block; margin: 5px; } </style> </head> <body> <script> function generateColorBlocks(numColors) { const colorBlock = document.createElement('div'); colorBlock.className = 'color-block'; for (let i = 0; i < numColors; i++) { let randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`; colorBlock.style.backgroundColor = randomColor; // 将生成的div添加到页面上 document.body.appendChild(colorBlock); } } // 生成30种颜色的div generateColorBlocks(30); </script> </body> </html> ``` 这个脚本会创建30个大小一致的div，每个div都有一个随机的背景颜色。`Math.random()`函数生成0到1之间的浮点数，然后乘以16777215得到一个介于0和16777215之间的整数，再转换成16进制字符串，作为RGB的颜色值。

阅读全文