首页 文章 问答 51讲堂 活动
写文章 提问题 登录 | 注册
  • 操作 for循环只循环一次的问题？
  • java其它
    5.00元

页面中random box按钮可以控制div盒子的背景色彩；
html结构代码如下

<div class='father'>
       123
       <div class="son"></div>
       <div class="son"></div>
       <div class="son"></div>
       <div class="son"></div>

   </div>
   <nav>
   <button id="bodycolor">random body</button>
   <button id="boxcolor">random box</button>
   </nav>

js代码如下

//随机16进制颜色的函数
   function randomColor(){
       var colorList= ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
       var colorStr='#';
       for(i=0;i < 6;i++){
           var index=parseInt(Math.random()*16);
           colorStr+=colorList[index];
       }//end for
       return colorStr;
   }//end function

//随机div背景颜色
   document.getElementById("boxcolor").onclick=function(){
       //获取页面中所有div对象，组成数组box
       var box=document.getElementsByTagName("div");
       //循环遍历box数组
       for(i=0;i < 5;i++){
           //改变div背景颜色
           box[i].style.backgroundColor=randomColor();
           console.log(box[i]);
       }//end for  
       //控制台输出box中的内容
       console.log(box);
   }//end function

实际效果：点击按钮只能够随机父级div的背景颜色，子级div无效果
分析：在控制台中可以看出box中获取了页面中所有的div对象，而for 循环中只输出了一次box数组中的元素，如下图：

所以不明白问题出在哪里，请大牛们解答！
感谢！
本案例全部代码附在下方

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>随机背景颜色</title>
   <style>
       *{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       body{
           position: relative;
            overflow: hidden;
       }
       button{
           width: 100px;
           height: 200px;
           font-weight: 700;
           border: 2px solid #fff;
           background-color: #ccc;
           color: #666;
           outline: none;
           position: absolute;
       }
       nav button:first-child{
           top:0px;
           left: 170px;    
           border-bottom: 1px solid #fff;
       }
       nav button:last-child{
           top: 200px;
           left: 170px;    
           border-top: 1px solid #fff;
       }
       button:hover{
           cursor: pointer;
           background-color: #666;
           color: #fff;

       }
       .father{
           margin: auto;
           margin-top: 20px;
           width: 900px;
           height: 400px;
           border: 2px solid #fff;
           border-left: 0;
       }
       .son{  
           margin: 0;
           width: 100px;
           height: 100px;
           border: 0;
           float: left;
           border: 1px solid #000;
       }
   </style>
</head>
<body>
   <div class='father'>
       123
       <div class="son"></div>
       <div class="son"></div>
       <div class="son"></div>
       <div class="son"></div>

   </div>
   <nav>
   <button id="bodycolor">random body</button>
   <button id="boxcolor">random box</button>
   </nav>
<script>
   /*随机16进制颜色的函数*/
   function randomColor(){
       var colorList= ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
       var colorStr='#';
       for(i=0;i < 6;i++){
           var index=parseInt(Math.random()*16);
           colorStr+=colorList[index];
       }//end for
       return colorStr;
   }//end function

   /*随机rgba格式颜色的函数*/
   function randomColorRgba(){
       var colorStr='rgba(';
       for(i=0;i<3;i++){
           colorStr+=(parseInt(Math.random()*(255+1))+', ');
       }//end for
       colorStr+=(Math.random()+')');
       return colorStr;
   }

   //随机body背景颜色
   var bd=document.getElementsByTagName("body");
   bd[0].style.backgroundColor=randomColor();
   document.getElementById("bodycolor").onclick=function(){
       bd[0].style.backgroundColor=randomColor();
   }


   //随机div背景颜色
   document.getElementById("boxcolor").onclick=function(){
       var box=document.getElementsByTagName("div");//获取页面中所有div对象，组成数组box
       for(i=0;i < 5;i++){                 //循环遍历box数组，
           box[i].style.backgroundColor=randomColor();//改变div背景颜色
           console.log(box[i]);   //问题是：在页面中只能给box中第一个对象加上背景颜色，其他对象不行
       }//end for  
       console.log(box);
   }//end function

</script>
</body>
</html>


  • Willson1991    2020-04-20 10:55:49
  • 阅读 1128    收藏 0    回答 1
  • 邀请
  • 收藏
  • 分享
发送
登录 后发表评论
  • 推荐问答
  • 换一换
  • 51testing软件测试圈微信