这篇文章主要介绍了 javascript 实现随机生成 DIV 背景色的具体代码,如何设置 DIV 背景色为随机色,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
随机色有两种格式:
效果预览: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>
- *{
- 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>
来源: http://www.phperz.com/article/17/0319/264758.html