JS：生成随机颜色案例

最新推荐文章于 2024-07-05 16:41:23 发布

奋斗音音

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量405

点赞数 11

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Saala/article/details/136599700

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

需求：

该函数接收一个布尔类型参数，比奥是颜色的格式是十六进制还是rgb格式

1：如果参数传递的是true或者无参数，则输出一个随机十六进制的颜色

2：如果参数传递的是false，则输出一个随机rgb的颜色

3：格式：

function getRandomColor(flag){

}

console.log(getRandomColor(true))

console.log(getRandomColor(false))

思路：

提示：16进制颜色格式为：’#fffff'其中f可以是0-f间的任意字符

可以利用数组： let arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']

提示：rgb颜色格式为：‘rgb(255,255,255)'其中255可以是任意0-255间的数字

直接生成三个0-255的随机数

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>

    function getRandomColor(flag) {
      if (flag) {//flag===false 为rgb表示形式：rgb()
        let x1 = Math.floor(Math.random() * 256)
        let x2 = Math.floor(Math.random() * 256)
        let x3 = Math.floor(Math.random() * 256)
        return `rgb(${x1},${x2},${x3})`
        // return rgb(x1, x2, x3)

      }
      //true/无参数为十六进制
      else {
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        let str = '#'//使用str数组将颜色字符拼接起来
        for (let i = 0; i < 6; i++) {
          let random = Math.floor(Math.random() * arr.length)
          str += arr[random]//通过随机下标获取数组元素
        }
        return str
      }

    }
    let n = prompt('请输入表示格式：')

    console.log(getRandomColor(n))
  </script>
</body>

</html>