javascript实现随机生成DIV背景色

随机色有两种格式：

效果预览：http://wjf444128852.github.io/DEMOLIST/JS/test/index.html

1、rgb(xxx,xxx,xxx)

2、#xxxxxx

下面实现两种随机的方法

思路：如何让x都是随机的，

1、中的xxx是0-255之间的随机整数，用Math.random()*255取得0-255之间的随机数，

再Math.floor()保留小数点前面的

2、中的x是0123456789abxdef中的随机6个的组合，

这里可以用数组或者字符串处理，这里采用数组，只要从数组里取6次，每次取得数组下标是0-16之间的随机整数即可。

注意(法二中虽然改变的是#XXXX，此时浏览器查看DOM元素的background-color属性值还是rgb格式的，但是JS中赋值是#xxx格式。)

代码如下：

HTML

  

    
RandomColor-rgb
    

      

      

      

      

    
  
  

    
RandomColor-#XXXXXX
    

      

      

      

      

    
  

CSS

*{
      box-sizing: border-box;
      list-style: none;
      border: none;
      padding: 0;
      margin: 0;
    }
    p{
      text-align: center;
      margin: 20px;
    }
    p a{
      font-size: 20px;
      font-weight: 300;
      color: #e4393c;
      text-decoration: none;
      padding: 6px 10px;
      border: 1px solid currentColor;
    }
    .bg_color,.bg_two{
      width: 100px;
      height: 100px;
      border: 1px solid #aa00aa;
    }
    .main,.main ul{
      overflow: hidden;
    }
    .main{
      width: 400px;
      margin:30px auto;
    }
    .main ul li{
      float: left;
    }

JS

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持全福编程网。