函数封装——随机生成背景色

一、实现：点击按钮，随机生成一个16进制或rgb的背景色

html结构：

    <button>点击生成随机颜色</button>
    <div class="box"></div>

css样式：

 .box {
            width: 100px;
            height: 100px;
        }

js完整代码：

 <script>
        let btn = document.querySelector('button')
        let box = document.querySelector('div')
        let flag = true
        btn.onclick = function() {
            flag = !flag
            let bg = getRandomColor(flag)
            flag ? box.style.backgroundColor = bg : box.style.backgroundColor = bg
            console.log(flag, bg);
        }

        let getRandom = function(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
    }

        function getRandomColor(flag) {
            let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
            let rgbArr = []
            let bg = ''
            let str = '#'
            if (flag) {
                for (let i = 0; i < 6; i++) {
                    let index = getRandom(0, arr.length - 1)
                    str += arr[index]
                }
                return str
            } else {
                for (let i = 0; i < 3; i++) {
                    let cloNum = getRandom(0, 255)
                    rgbArr.push(cloNum)
                }
                bg = `rgb(${rgbArr[0]},${rgbArr[1]},${rgbArr[2]})`
                return bg
            }
        }
    </script>

二、效果：

 

三、js 实现分析：

生成随机颜色的一个函数：

16进制的和rgb的：如#ffffff 、rgb(255,255,255)

16进制的颜色实现思路：

先随机生成一个 0-f 的其中一个值，然后遍历6次，就能得到比如 5ab7cd 之类的值，再和“#”字符串拼接起来，返回出去就好了，那么如何实现随机生成一个 0-f 的其中一个值呢？

我们有个内置函数Math.random()方法，可以生成 0-1，包括0但不包括1之间的随机数，还有个公式，可以生成 N-M 之间的随机数（包括N，M哦，取值范围是[N,M]），我们利用这个，生成arr数组的一个随机索引，通过索引就能拿到0-f中的值。

rgb(255,255,255)的实现思路：

其实直接调三次getRandom 函数就行，就能获取三个随机值，然后直接用模板字符串一展示就行，我是直接遍历了，咋写都行，咋好理解咋来

公式：

        return Math.floor(Math.random() * (M - N + 1)) + N

 生成 N-M 之间的随机数函数：

let getRandom = function(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
    }

     function getRandomColor(flag) {
            let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
            let rgbArr = []
            let bg = ''
            let str = '#'
            if (flag) {
                for (let i = 0; i < 6; i++) {
                    let index = getRandom(0, arr.length - 1)//这个函数能取到0到16的值，(16是数组的长度)，因为是索引，索引是取不到长度的最后一位的，索引不是从0开始嘛，arr[0],拿到的是数组里第一个值0，arr[15]才是数组的最后一个值，arr[16]是没有的哦,所以才要减一
                    str += arr[index]
                }
                return str
            } else {
                for (let i = 0; i < 3; i++) {
                    let cloNum = getRandom(0, 255)
                    rgbArr.push(cloNum)
                }
                bg = `rgb(${rgbArr[0]},${rgbArr[1]},${rgbArr[2]})`
                return bg
            }
        }

这随机生成背景色函数getRandomColor放.js文件里，下次直接引入就能使了，当然别忘了还有那个生成 N-M 之间的随机数函数getRandom，你可以把这个函数放getRandomColor里就行了