栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

javascript实现随机生成DIV背景色

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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