javascript如何设置DIV背景色为随机色-阿里云开发者社区

开发者社区> 水灵儿> 正文

javascript如何设置DIV背景色为随机色

简介: 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

复制代码
<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

复制代码
*{
            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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript自动设置IFrame高度(兼容各主流浏览器)
调用方式如下   function SetIFrameHeight(down) {         var Sys = {};         var ua = navigator.
651 0
Eclipse设置Android Logcat输出字体大小
Window -> Preferences -> Android -> Logcat -> Display Font:点击“Change”按钮 如图: 
686 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10667 0
如何设置不让editplus生成bak文件
  把“保存时创建备份文件”前面的√ 去掉即可。
847 0
Linux使用手册-时区和时间设置
1. #vi /etc/sysconfig/clockZONE=”Asia/Shanghai”UTC=false2.#vi /usr/share/zoneinfo/Asia/Shanghai,如果结尾不是GMT+8,则修改为GMT+83.
664 0
Python爬虫:scrapy-splash的请求头和代理参数设置
Python爬虫:scrapy-splash的请求头和代理参数设置
10 0
+关注
水灵儿
www.zyl.me 爱折腾,喜欢造,花起钱来毫不心疼,事后沉默一周... 极简主义者,主从事Web开发兼前端爱好者。 全栈开发尝试者、自媒体、极简主义者、爱心极客
144
文章
83
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载