1. 云栖社区>
  2. >
  3. 正文

javascript实现随机生成DIV背景色_javascript技巧

作者:用户 来源:互联网 时间:2016-06-20 10:30:19

js背景色随机生成js随机色js背景色

javascript实现随机生成DIV背景色_javascript技巧 - 摘要: 本文讲的是javascript实现随机生成DIV背景色_javascript技巧, 随机色有两种格式: 效果预览:http://wjf444128852.github.io/DEMOLIST/JS/test/index.html 1、rgb(xxx,xxx,xxx)  2、#xxxxxx 下面实现两种随机的方法 思路:如

随机色有两种格式:
效果预览: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

<body>
  <div class="main">
    <p><a href="javascript:;" id="btn-one">RandomColor-rgb</a></p>
    <ul>
      <li><div class="bg_color"></div></li>
      <li><div class="bg_color"></div></li>
      <li><div class="bg_color"></div></li>
      <li><div class="bg_color"></div></li>
    </ul>
  </div>
  <div class="main">
    <p><a href="javascript:;" id="btn-two">RandomColor-#XXXXXX</a></p>
    <ul>
      <li><div class="bg_two"></div></li>
      <li><div class="bg_two"></div></li>
      <li><div class="bg_two"></div></li>
      <li><div class="bg_two"></div></li>
    </ul>
  </div>
</body>

CSS 

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

<script>
  (function(){
    //1、随机色的函数-rgb
    function getRandomColor(){
      var rgb='rgb('+Math.floor(Math.random()*255)+','   

      +Math.floor(Math.random()*255)+','  

      +Math.floor(Math.random()*255)+')';
      console.log(rgb);
      return rgb;
    }
//  获取按钮
    var btn_one=document.querySelector("#btn-one");
    var Divs=document.querySelectorAll(".bg_color");
    btn_one.onclick=function(){
      for(var i=0;i<Divs.length;i++){
        Divs[i].style.backgroundColor=getRandomColor();
      }
    };
    //2、随机颜色#XXXXXX
    var btn_two=document.querySelector("#btn-two");
    var divsTwo=document.querySelectorAll(".bg_two");
    var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
    function generateMixed(n) {
      var res = "#";
      var id;
      for(var i = 0; i < n ; i ++) {
        id= Math.floor(Math.random()*16);
        res += chars[id];
      }
      console.log(id,res);
      return res;
    }
    btn_two.onclick=function(){
      for(var i=0;i<divsTwo.length;i++){
        divsTwo[i].style.backgroundColor=generateMixed(6);
      }
    };
  })()
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云栖社区。

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js背景色随机生成 , js随机色 js背景色 javascript生成随机数、js随机生成div、随机生成div、javascript 随机数、javascript 随机整数,以便于您获取更多的相关知识。

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备