js生成随机颜色（两种方式）

最新推荐文章于 2024-07-31 13:08:05 发布

大个个个个个儿

最新推荐文章于 2024-07-31 13:08:05 发布

阅读量858

点赞数 3

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_40269801/article/details/115667723

版权

js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

需求：随机生成颜色，六进制格式 / rgb格式

<ul>
        <li id="btn1" style="width:100px">111</li>
        <li id="btn2" style="width:100px">222</li>
        <li id="btn3" style="width:100px">333</li>
        <li id="btn4" style="width:100px">444</li>
        <li id="btn5" style="width:100px">555</li>
    </ul>

原生js：

var btn1=document.getElementById('btn1').style.background=bg3();
var btn2=document.getElementById('btn2').style.background=bg3();
var btn3=document.getElementById('btn3').style.background=bg3();
var btn4=document.getElementById('btn4').style.background=bg3();
var btn5=document.getElementById('btn5').style.background=bg3();
         
function bg3(){
  let a = '#'+Math.floor(Math.random()*0xffffff).toString(16);
   console.log(a)
  if(a == '#fff'){
      a = '#'+Math.floor(Math.random()*0xffffff).toString(16);
  }
  return a;



// var r = Math.floor(Math.random() * 254); //随机生成256以内r值
// var g = Math.floor(Math.random() * 254); //随机生成256以内g值
// var b = Math.floor(Math.random() * 254); //随机生成256以内b值
// return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式颜色 ，所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
}