V字型图片

原创 502972636 随笔 JS 248阅读 2018-01-04 21:20:12 举报

获取元素的方法:

  1. 通过id获取元素
    document.getElementById('id名字')
    1. 通过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);
  1. 通过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>
  2. 取模
    奇数 数字%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字型图片

小案例:

V字型图片

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复