思路
实现一个函数，随机生成颜色，格式为 #000000
- 颜色由
a-f|A-F|0-9 3种字母任意组成
- 且
#后面是3位或者6位
- 只要随机生成一个数字是奇数或者偶数来随机出是3位或者6位
- 然后在随机其下标循环上面步骤确认的次数
function randomColor(){
const color = ['a','b','c','d','e','f','A','B','C','D','E','0','1','2','3','4','5','6','7','8','9']
// 三位和六位，都是有用的二进制颜色 设置type为奇数就是3，偶数就是6位
const type = ~~(Math.random() * 10 + 1)
// 循环的长度
let len = type % 2 == 0 ? 3 : 6
// 存放结果
let ans = ''
for(let i = 0; i < len;i++) {
//这里循环随机得到数组下标
let index = ~~(Math.random() * color.length)
ans += color[index]
}
return '#' + ans
}
console.log(randomColor());
常见的应用 ———— 背景颜色随机
<!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>
#background{
width: 400px;
height: 400px;
margin: auto;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="background"></div>
<script>
function randomColor(){
const color = ['a','b','c','d','e','f','A','B','C','D','E','0','1','2','3','4','5','6','7','8','9']
// 三位和六位，都是有用的二进制颜色 设置type为奇数就是3，偶数就是6位
const type = ~~(Math.random() * 10 + 1)
// 循环的长度
let len = type % 2 == 0 ? 3 : 6
// 存放结果
let ans = ''
for(let i = 0; i < len;i++) {
//这里循环随机得到数组下标
let index = ~~(Math.random() * color.length)
ans += color[index]
}
return '#' + ans
}
let background = document.getElementById('background')
setInterval(() => {
background.style.backgroundColor = randomColor()
},3000)
</script>
</body>
</html>
