[JavaScript知识库] js随机生成颜色函数—

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> js随机生成颜色函数——《js应用场景》 -> 正文阅读

[JavaScript知识库]js随机生成颜色函数——《js应用场景》

思路

实现一个函数，随机生成颜色，格式为 #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>