V字型图片

获取元素的方法：

1. 通过id获取元素
   document.getElementById('id名字')
   2. 通过class名字获取
      document.getElement s ByClassName('class名字')

                                 注意：
              通过class去取值，即便取到的只有一个元素，也要用下标取值
      
      // 获取的是一个集合，是多个元素， 不是数组，是类数组
      var actives = document.getElementsByClassName('active');

      // 获取元素的class为active的元素，添加上背景颜色为red
      console.log(actives);

      // 不能给这个集合添加颜色，要通过这个集合找到具体的一个元素，然
      后添加背景
      // actives.style.background = 'red'; // 这种用法是错

          要通过下标去集合中找元素 下标从0开始
          集合的长度：length
                                actives[0].style.background = 'red';
      actives[1].style.background = 'red'

      // 给每一个元素添加背景颜色，用for
      for(var i = 0; i < actives.length; i++){
      actives[i].style.background = 'red';
      }

      案例：<ul class="list">
      <li class="active">通过class获取</li>
      <li>通过class获取</li>
      <li class="active">通过class获取</li>
      <li>通过class获取</li>
      </ul>
                  1. 从整个文档找
      var actives = document.getElementsByClassName('active');

      【从整个文档中class名为active的li】
      console.log(actives);

      2.var list = document.getElementsByClassName('list');
                  【先找ul】
       这个是从ul下找的
      var list_actives = list[0].getElementsByClassName('active');
                   【第一个ul下面class名为active的li】
      console.log(list_actives);

3.通过tagName名字获取
1）整个文档去找
document.getElementsByTagName('标签名字')
2）找某个元素符合条件的集合
元素.getElementsByTagName('class名字')

                          案例：1. 从整个文档找
        var ps = document.getElementsByTagName('p');
                     【找p标签】
        ps[0].style.background = 'red';
        console.log(ps);

                 2.找某个元素符合条件的集合
                            var uls = document.getElementsByClassName('list');
                            【找class名为list的ul】
        var lis2 = uls[1].getElementsByTagName('li');
                     【第一个ul下标签名为li所有标签】
        console.log(lis2);

4. 通过css的选择器
   只能获取一个，如果是多个，默认值获取第一个
   document.querySelector('css选择器')
   元素.querySelector('css选择器')
   获取多个
   document.querySelectorAll('css选择器')
   元素.querySelectorAll('css选择器')

                                   案例：
                                        【获取一个】

   var box = document.querySelector('#box');
   console.log(box);

                                             【获取多个】
                                        // 也是集合，通过下标取
       var actives = document.querySelectorAll('.active');
       console.log(actives[0]);
                   【class名为active的所有元素，根据下标为0打出第一个】
   
       var lis = document.querySelectorAll('.list1 li');
       console.log(lis);
                  【取ul里面的li,通过class名找】
   
       var list1 = document.querySelector('.list1');
                    【通过css选择器 class 找到.list】
       var lis2 = list1.querySelectorAll('li');
                    【通过元素找到所有li集合】
       console.log(lis2)

   练习案例：生成10个div
   <div id="box">
   <!-- <div></div>
   <div></div>
   <div></div> -->
   </div>
   <script>

       // 隔行变色 奇数个背景为blue，偶数个背景为green
   
       var box = document.querySelector('#box');
       var str = '';
       for(var i = 0; i < 10; i++){
           //var str = '';  // 每一次循环都会重新生成str
           str += '<div></div>'
       }
                 [最后把形成的div放在box里面]
       box.innerHTML = str;
             </script>

5. 取模
   奇数 数字%2 有余数就是奇数
   偶数 数字%2 == 0

           求余数    用 %    取模： 取余 的整数
   
               求一个数除以另一个数的余数
   
               左边小于右边，返回的是左边的值
               左边和右边相同，返回是0
               左边大于右边，返回的是左边除以右边的余数
   
                        案例：

   需求：生成10个div隔行变色 奇数个背景为blue，偶数个背景为
   green

               <div id="box">
       <!-- <div></div>
       <div></div>
       <div></div> -->
   </div>
                 var box = document.querySelector('#box');
       var str = '';
       for(var i = 0; i < 10; i++){
           // i为0 代表的是第一个
           if (i % 2 == 0) { // i是偶数
               str += '<div style="background: 
                                              blue;"></div>'
           }else{
               str += '<div style="background: 
                                              green;"></div>'
           }
   
       }
   
       box.innerHTML = str;
   </script>
   
           案例：生成10*10方格
   
           <style>
       #box div {
           width: 80px;
           height: 80px;
           background: red;
           display: inline-block;
           margin: 10px;
           font-size: 30px;
           color: #fff;
           position: absolute;
           left: 0;
           top: 0;
       }
           </style>
                    <script>
       var box = document.querySelector("#box");
       var str = '';
       var row = -1;【行数设为-1】
                   【需求：生成100个div，每行10个】
       for(var i = 0; i < 100; i++){
           // 每一行div的left都是 (0-9) * 80
           /*
               第一行i: 0 - 9   i%10= 0-9
               第二行i: 10-19   i%10= 0-9
               第三行i: 20-29   i%10= 0-9
           */
           // i: 0 10 20 30 90
           if(i % 10 == 0 【为偶数时行数加1】){
               row++;【第一个i=0,row=0,为第一行】
           }
                       【div用定位排开】
           str += '<div style="left【左边定位】:'+   
                                     (i%10)*90【每一行都有0-9个，当下标为10
                                     时，i%10=0,与第一个div重叠，，以后每当 
                 i%10=0时都重叠】+'px;
                                      top【上边定位】:'+row*90【行与行之间差一
                                      个div的宽度】+'px;">'+
                                     (i)+'</div>'
       }
   
       box.innerHTML = str;
   
   </script>
   
         案例：
                 需求：生成V字型的图片
            <style>
       #box {
           width: 500px;
           height: 500px;
           margin:0px auto;
           position: relative;
           border: 1px solid #000;
       }
       #box div {
           width: 50px;
           height: 50px;
           position: absolute;
           left: 0px;
           top: 0px;
           background: red;
       }
   </style>
           <div id="box">
       <div style="left:0px;top:0px;">123</div>
   </div>
   <script>
                   【//获取变量】
       var box = document.querySelector('#box');
                 【声明一个空的变量】
       var str = '';
                 【/5个div在上 ，数字2向下】
       for(var i = 0; i < 5; i++){
   
           if (i <= 2) {      //以下标2为判断条件 
                                     //top值是递增的  下标小于等于2的时候
                                     left值也是递增的
               str += '<div style="top:'+(i*50)+'px;left:'+
                                              (i)*50+'px;">'+i+'</div>'
           }else{
                                   //下标大于2的时候left值就递减等于总的最
                                    大的i减去判断界限 ，
                                     第三个距离底部一个(4-i)*50 四个距离底部为0
               str += '<div style="top:'+(i*50)+'px;left:'+(4-
                                              i)*50+'px;">'+i+'</div>'
           }
       }
                 //最后把形成的div放在boxTop里面
       box.innerHTML = str;
   
       // for循环是从0开始到100，
                【思路】
       for(var j = 0; j < 5; j++){
           //console.log(j);  // 从小到大  0 1 2 3 4 
           //console.log(4-j); // 从大到小
                       // 预期：2，1， 0，1 ，2，  i的值2-
                                                            0  ， 2-1  ，2-2 ， 3-2  ，4-2 
   
           if(j <=2){
               console.log( 2 - j );
           }else{
               console.log( j - 2 );
           }
       }
   
   </script>
   
          图片：

小案例：

V字型图片