IT博客汇 | 使用 js 随机生成背景颜色

使用 js 随机生成背景颜色

子舒的博客发表于 2021-09-29 00:00:00

先写一个简单的 html 页面出来 <style> /* ... */ </style> <ul> <li>html</li> <li>css</li> <li>js</li> </ul> 通过 Math.random() 属性可以随机生成一个数字，然后通过转化为十六进制的方法进行处理，下面就是随机生成 6 位数字的代码，并进行转化的代码。 const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`; 可以在控制台输出看一下结果，随机生成了一个结果 #62113b。接下来就需要将这个颜色传给上面的 li 标签，首先需要将所有的 li 遍历然后生成一个数组，可以使用 for 循环进行遍历。 var arr = document.getElementsByTagName('li'), temp = []; for (var i = 0; i < arr.length; i++) { temp.push(arr[i].innerHTML); } 然后再对数组进行循环处理，每个 li 标签要要运行一遍随机生成颜色，并且传给自身。同样也是通过 for 循环进行操作。 var li = document.getElementsByTagName("li"); for (var i = 0; i < li.length; i++) { for (var num = 0; num < li.length; num++) { li[num].style.background = randomHex(); } } 这些事件都是在页面加载完成之后运行的，所以需要通过 window.onload 写入事件，然后把所有的代码合在一起。看看效果如果。把这些复制下来放到本地运行一下就可以看到效果了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随机生成颜色</title> <style> body { display: flex; justify-content: center; padding-top: 100px; } ul { list-style: none; padding: 0; display: flex; } li { width: 100px; height: 40px; color: #333; display: flex; justify-content: center; align-items: center; margin-right: 30px; } </style> </head> <body> <ul> <li>html</li> <li>css</li> <li>js</li> </ul> <script> const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`; console.log(randomHex()); var arr = document.getElementsByTagName('li'), temp = []; for (var i = 0; i < arr.length; i++) { temp.push(arr[i].innerHTML); } window.onload = function () { var li = document.getElementsByTagName("li"); for (var i = 0; i < li.length; i++) { for (var num = 0; num < li.length; num++) { li[num].style.background = randomHex(); } } } </script> </body> </html> 如果有更好的写法，欢迎评论！