Java背景颜色怎么设成随机的_[Java教程]javascript如何设置DIV背景色为随机色

最新推荐文章于 2021-08-30 19:13:08 发布

东北爷们儿爱做饭

最新推荐文章于 2021-08-30 19:13:08 发布

阅读量240

点赞数

文章标签： Java背景颜色怎么设成随机的

本文链接：https://blog.csdn.net/weixin_32311541/article/details/114869052

版权

[Java教程]javascript如何设置DIV背景色为随机色

0 2016-06-18 16:00:04

随机色有两种格式：

效果预览：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; }

+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.οnclick=function(){ for(var i=0;i

本文网址：http://www.shaoqun.com/a/232565.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

JavaScript