2020-12-12

20—12—12      星期六   晴

总结：一周总是过得非常快，进入到了第二个阶段的第二周，这周的的知识点很多，但大多数都是靠记忆的，并且有些知识点是可以靠对比来记忆的。第一天，学习了什么叫做定时器，以及用法。定时器分为两类，settimeout，第一个叫做延时定时器，在指定的时间之后开始执行，不会重复执行，只会执行一次。setinterval，第二个叫做重复定时器，会重复执行。二者的语法都一样，都是定时器名称（函数体，时间（单位：毫秒））；有了定时器之后，就有清定时器的方法，同样有两个，二者是一一对应的，clearTimeout，clearInterval。定时器在之后的学习及工作中用途广泛，轮播图，点名器。。。等，所以各位一定要将之学好。放几个案例：

定时器：

    

    

    

    

        

    

    

定时器弹出小窗口：

    

    

    

    

        

    

    

接着知识点又讲了math对象，math主要是一些数学相关的知识，math.floor(),此方法用于取整数。

math.abs（）方法，返回参数的绝对值。其中有一个较为重要的方法,叫random方法，此方法返回一个0~1之间的随机数。此方法可以用来生成验证码，以及抽奖等与随机数相关的等等。

案例：随机生成验证码

    

    

    

    

    

    

    

    

接着讲了简单的盒子动画，向左向右，向上向下移动。总的来讲：简单的盒子运动实际上就是通过不停的改变他的left或top值，此过程呢，较为繁琐，故而封装成函数，以便于以后调用它。

简单运动封装

function move(obj, target, step, attr) {

    // 根据起点和终点之间的关系，判定速度的正负

    step = parseFloat(getComputedStyle(obj, null)[attr]) > target ? -step : step;//起点>终点?

    clearInterval(obj.timer);//清除

    obj.timer = setInterval(function () {

        var l = parseFloat(getComputedStyle(obj, null)[attr]);//当前的div的属性值

        var speed = l + step;//  +5  +(-5)      每一次移动到的位置

        //到达边界时，

        if (speed >= target && step > 0 || speed <= target && step < 0) {

            clearInterval(obj.timer);

            speed = target;//边界值

        }

        obj.style[attr] = speed + "px";

    }, 20);

}

// function move(obj,tag,stopValue,attr){

//     tag=stopValue>parseInt(getStyle(obj,attr))?tag:-tag;

//     clearInterval(obj.timer);

//     obj.timer=setInterval(function(){

//         var speed=parseInt(getStyle(obj,attr))+tag;

//         if(speed<=stopValue&&tag<0||speed>=stopValue&&tag>0){

//             speed=stopValue;

//         }

//         obj.style[attr]=speed+'px';

//         if(speed==stopValue){

//             clearInterval(obj.timer);

//         }

//     },30);

// }

第二天讲的知识点有两个：时间对象和字符串对象

关于对象：首先要理解对象的概念，什么叫对象；在js中，一切皆为或者都可以被用作对象。可以通过new一个对象或者直接以字面量形式创建变量，所有变量都有对象的性质。注意：通过字面量创建的对象在调用方法和属性时会被对象包装器暂时包装成一个对象，具有对象特征。谈到对象，一般有两个部分，对象属性和对象方法，对象方法；对象属性是指他的特性，对象方法是指他能干神魔事。对对象有了简单的了解之后，接下来就可以去谈时间对象了。

所谓时间对象：就是与时间有关的一些知识。

1.创建时间对象；在调用Date构造函数而不传递参数的情况下，新创建的对象自动获得当前电脑的日期和时间。直接获取特定的时间的特定部分：年月日星期的方法。

!DOCTYPE html>

    

    

    

    

倒计时案例：

    

    

    

    

        

倒计时

        请输入：年 月 日

        开始

        现在距离- 0000 -还剩：

        00天 00小时 00分 00秒

    

数字时钟：

    

    

    

    

    

    

    

    

    

    

2.字符串对象

字符串也是我们经常需要处理的东西。为方便使用者，也为我们提供了很多种方法。

1）length方法，字符串的长度，成对单双引号包含的都是字符串。string类型的每一个实例都会有一个length属性，表示字符串中包含多个字符。

2）charAt（）方法，此方法可以通过下标访问对应的字符，语法：stringobject.chartAt（index）

3）charCodeAt（）方法，可以返回指定位置的Unicode编码。这个返回值是0~65535之间的整数。

4）indexOf（）方法可返回某个指定的字符串值在字符串中首次出现的位置。

5）lastindexof（）方法可返回某个指定的字符串值在字符串中最后一次出现的位置。

6）substring（）方法用于提取字符串中介于两个指定下标之间的字符。

7）slice（）方法可以提取字符串中的某个部分，并以新的字符串返回被提取的部分。

        上面这两种截取字符串的方法，用法基本一样两种方法都会返回被操作的字符串的一个新的字符串，而且也都能接受一个或两个参数。第一个参数是指定字符串的开始位置，第二个参数表示字符串到哪里结束，即子字符串最后一个字符后面的位置，substring中负数默认为零，slice中负数表示倒数第几个。

8）substr（）方法可以在字符串中抽取从start下标开始的指定数目的字符。

9）split（）方法，字符串分割，用于把一个字符串分割成字符串数组。

10）replace（）方法，替换字符。

案例：

字符串方法

    

    

    

    

字符串处理

    

    

    

    

字符串分割

    

    

    

    

自动切换选项卡：

    

    

    

    

        

            a

            

b

            

c

            

d

        

        

            

                a1

            

            

                b1

            

            

                c1

            

            

                d1