JavaScript随机生成颜色功能

影风莫

已于 2023-06-21 18:26:11 修改

阅读量1.2k

点赞数

分类专栏：应用场景文章标签： JavaScript 前端面试

于 2022-04-23 10:32:31 首次发布

本文链接：https://blog.csdn.net/weixin_50789156/article/details/124360339

版权

应用场景专栏收录该内容

1 篇文章 0 订阅

订阅专栏

思路

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