JavaScript随机生成颜色功能
思路
实现一个函数，随机生成颜色，格式为 #000000
- 颜色由
a-f|A-F|0-93种字母任意组成 - 且
#后面是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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！