前端学习打卡第八周（3.13-3.20）

1.js学习

构造函数

    function 构造函数名（）{

        this. 属性=值

        this.方法 = function(){}

    }*/

        function Stars(uname,age,sex){

            this.name = uname;

            this.age = age;

            this.sex = sex;

           this.sing = function(sang){

               console.log(sang);

           }

        }

       var ldh = new Stars('刘德华',18,'男');

       ldh.sing('冰雨');

       var zxy = new Stars('张学友',19,'男');

       console.log(ldh.name);

       console.log(ldh);

       //作业

       function Hero(uname,type,blood,atk){

           this.name = uname ;

           this.type = type;

           this.blood = blood;

           this.attack = function(atk){

               console.log(atk);

           }

       }

       

       var lianpo = new Hero('廉颇','坦克',500,);

       lianpo.attack=('近战');

       var houyi = new Hero('后翌','射手',100,);

       houyi.attack=('远程');

       console.log(lianpo);

       console.log(houyi);

     

       /*

       1new在内存中创建新的空对象

       2让this指向新对象

       3执行代码，添加方法

       4返回这个新对象（不需要返回值）

       */

      // 遍历对象 for（变量 in对象）{}

      for(var k in houyi){

          console.log(k);

          console.log(houyi[k]);

      }

      //随机数

      function getrandom(min,max){

          return Math.floor(Math.random()*(max-min+1))+min;

      }

     

      console.log(getrandom(1,100)) ;

      var date = new Date();

      var date2 = new Date('2022-3-14')

      console.log(date.getFullYear());

      console.log(date.getMonth()+1);//得到的月份比实际小一，周也是

      console.log(date.getDay());

      //数组

      var arr = [1,2,3,3,5,5,22];

      var newarr=[];

      arr.push(4,'abc'); //push在数组后面加

      arr.unshift(123,52);//unshift在前面

      //pop删除数组最后一个元素，返回删除的元素

     //shift 删除第一个元素 返回第一个元素

     for(var i in arr ){

         if (i >5){

            newarr.push(arr[i]);

         }

     }

     console.log(newarr);

     //数组索引

     console.log(arr.indexOf(22));//相同的数返回第一个的位置，没有返回-1

     //lastIndexOf 从后往前查找，索引号不变

     //数组转换为字符串

     //1，toString  2，join（分隔符 ）

     console.log (arr.toString());

     console.log (arr.join('-'));

     //基本包装类型 把简单数据类型包装成复杂数据类型

    /*字符串的不可变性

      因为字符串不可变所以不要大量拼接字符串

    */

   /*根据位置返回字符

   */

  var str = 'andy';

  //char at

  for(var i =0; i < str.length;i++){

    console.log(str.charAt(i));

  }

  //2.charCodeAt(index) 返回相应索引号的字符的ascii码

  console.log(str.charCodeAt(0));

  //3str[]

  console.log(str[0]);

//  concat('字符串1，字符串2')等于+

//substr(截取的起始位置 截取几个字符)

/*替换字符replace('a','b')只会替换第一个字符*/

/*简单数据类型（值类型）string number boolean undifined null

null   返回 object

复杂数据类型 object array Date*/

2.dom webapi

getElementById

        //1 因为文档从上向下加载，script 写在下面

        //2 get 获得 element 元素 用驼峰命名法

        //参数 id 是大小写敏感的字符串

       var timer= document.getElementById('time');

       console.log(timer);

       console.log( typeof timer);

       console.dir(timer);

    </script>

    <ul>

        <li>12345</li>

        <li>12345</li>

        <li>12345</li>

        <li>12345</li>

        <li>12345</li>

    </ul>

    <script>

        var lis = document.getElementsByTagName('li');

        console.log (lis);//以伪数组的形式输出

    </script>

    <div class="box">盒子</div>

    <div class="box">盒子</div>

    <script>

        var box = document.getElementsByClassName('box');

        console.log(box);//类名选择器

        //queryselector 返回指定选择器的第一个元素对象 切记要加符号 .box #nav

    </script>

    <script>

        //获取body 元素

        var body1=document.body;

        console.log(body1);

        //获取html 元素

        var html1= document.documentElement;

        console.log(html1);

    </script>

    <button id="btn">唐伯虎</button>

    <script>

        //事件源 事件类型 事件处理程序  三要素

        //点击按钮弹出对话框

        var btn = document.getElementById('btn');//事件源

        btn.onclick = function(){

            alert('点秋香');

        }

    </script>

    <button id="showTime">显示时间</button>

    <div id="timer">某个时间</div>

    <script>

        var showTime = document.getElementById('showTime');

        var timer= document.getElementById('timer');

        showTime.onclick = function(){

            var date = new Date();

            timer.innerText = date;

        }