131.尚硅谷_JS基础_定时器的应用（一）

上午说我们这个这个定时调用，还有我们这个延时调用，那接下来呢，我们就可以拿它做这个小东西出来了，那我们以后呢，我们就这一段时间，我们还是以这个定时调用为主，但是你们还是知道这两个东西可以互相去代替啊，互相代替，那我们来先整这么一个东西吧。整这么一个东西，我们还是说一下我们这个，呃，这个定时器的事，我们做一个小的功能，什么小的功能呢？诶咱们来看啊，现在呢，我在页面里我创建一个div div呢给它一个ID叫做井号box，就直接叫BOX1啊BOX1，然后呢，在BOX1上我来一个这个button b button，然后ID我们叫做一个B填零一，呃做一个功能叫什么呢？叫做点击按钮以后，使我们这个BOX1就直接写吧，点击按钮以后我们这个box一向。右移动啊，Box c向右移动，然后呢，我们这儿来设置一下一个样式啊，我们先写这么一个星号，来一个Mar丁，来一个这个零，然后来一个拍顶来一个零，这在干嘛呀，清除那个默认样是吧，再来一个井号，一个BOXSS1BOXS1呢，我们来一个来一个100个像素，一个100个像素，然后background color来一个这个red啊red什么也不写了，然后直接到我们这个web浏览去看，一运行。

诶，是不是出现这么一个东西啊，诶，那这俩现在有点近啊，我来给他调整一下距离，还是给他来俩换行一保存距离给它拉开，那这功能很明显了，我就希望什么呀，我一点这按钮，这哥们儿你干嘛呀，从这儿走走走走走走，是不是一直往右走啊，诶一直往右走，那既要让它往右走了，那其实毫无疑问我们差一个什么呀。是不是需要让它定位啊，要给它开启这个绝对定位，所以这里边我们来一个这个position，来一个啊salute啊开启这个绝对定位，那我需要效果什么呀？点击按钮以后，让它一直一直一直一直就开始往右走，让它往右走，那实际上再修改什么呀，是不是修改它的left值啊，Left值逐渐增大，它是不是越来越往右啊，诶值越大越往右，值越大越往右这么一个效果，那现在呢，我们来看这功能怎么做，但是注意了，我不是一上来就它往右，我得干嘛呀，是不是点击按钮以后啊，诶所以这里边我们要先写点这个接代码，来一个window，点一个onload，等于一个function，等于一个function，那既然社交这两个东西了，我们来获取到他们先来干嘛呢？先来获取我这个BOX1，直接挂一个BOX1，等于一个document的点，一个get and的100ID get and的白D，来一个BOX1，然后呢，下边还有一个按钮是获取我们这个什么呀，叫做BT01。

Y一个B天零一等于一个高的点一个get at版ID来个B天零一，现在我们要做的功能是什么呢？是点击我们这个按钮以后，诶使什么呢？使我们这个BOX1干嘛呢？向右移动，向右移动，换句话说我们说什么呀，Life的值增大啊life的值增大，然后呢，那在这，那我就要写什么呀，就是B填零一.on click，我是要先给他绑定单击响应函数，对单讲函数啊绑定完了这我们来实验一下alert一个这个hello，然后保存我们来看啊，这一刷新一点是不是hello出来了，诶hello出来了，好，那现在我要让它向左移动，那实际上就是修改它的什么呀，Life的值，但是如果你要这么写的话，我们来看看啊，如果我直接来一个box1.1个那个style，点一个left，我等于什么呢？等于一个200个像素能不能动啊。

能动吧，哎，我这一刷新一点是不是动了呀，但是问题来了，这不是我们要求，我希望什么呀，它持续的往这边走吧，而不是什么呀，而不是只动一下，所以我希望什么呢？它持续的走，而不是这种什么呀，直接就动一下，诶那这块怎么办了，我要想它动，我是不是就开启一个定时器啊，诶开启一个定时器，诶开启一个这个定时器用来干嘛的呢？诶用来执行我们这个动画效果啊，动画效果来一个叫做一个叫做一个size，一个interval啊再有一个interval，然后呢，我们这来一个这个function啊，来一个函数，然后呢，这需要一个什么呀，时间吧，哎时间我们来一个短一点，就直接30毫秒，也就是说我这个函数是每30毫秒是干嘛呀，是不是调上一次呀，哎，每30毫秒调一次啊好，那这样写完了，那接下来再看那这块处理完了，那接下来我们是不是要在这去修改它这个left的值了，那我怎么修改呀。

我让它一点一点往这边移动，是不是在他这life的值位增大呀，Life的值在什么基础上增大呀，是不是在它原来值的基础上增大呀，原来值是零，我给它加个十变成十是不增大了呀，诶然后十我说里加上一个20是不是就增大了呀？诶所以这块什么呀，我在原来的值的基础上进行增大，那所以那我得先干嘛呀。

我是不是先得有它原来的值啊，诶所以干嘛呢？哎，获取我们这个BOX1什么呢？诶的原来的这个，诶原来的这个life的值，那怎么获取啊，最简单的直接挖一个old的VALUE6O的旧的值啊old的VALUE6等于什么呢？等于一个我们直接来一个box1.1个这个off set left是不是这么一个值啊，诶来我们看看啊，直接来一个alert，这个old的Y0 alert这个O的Y0，然后保存我们看看这你刷新走你一点多少啊，零是不是就获取到了啊，就获取到了啊，然后我在零的基础上进行一点点增加，是不是就OK了呀，但是这里边我们面临一个问题啊，这块呢。哦，他我定我写到定时调用里边是吧？诶是不是每隔30秒就要给它调一次啊，哎，咱们先不管它了，那现在这个旧值我们已经获取到了，那接下来呢。

接下来呢，咱们先不管那个就职，咱们先不管接下来啊，我们先看这一个问题，现在我这儿写的是一个offset left啊，咱们在外边获取啊，咱们先在外边获取，待会再放进来，因为它这块，不然他老给你盯着调用啊，我们给他放新，这样一点呢，就一次就完事啊，一次完事了，现在呢，我们是获得这个off outside life的，待会我们来看看我这么写好不好呢，这么写行，但是我将来是想干嘛呢？我想把这个函数给它作为一个这个通用的方法，让它可以适用于我这个，诶，任何的这种动画的操作，所以我希望什么呢？那既然我要作为任何动画操作，那我是不是只修改left值。不是吧，有可能我会修改top对吧，有可能我会修改哎，宽度还有可能修改什么呀，高度我们height，我们这个高度对吧？那现在你这写一个off outside left，这是不是就已经写死了呀？哎，我希望采用一种什么呢？更灵活的方式来完成这个功能，那怎么办呢？诶，那我们有没有一个方法是可以根据我们这个样式名来获取样式质量。

哎，咱们之前是不是写过一个这个。Get style这个方法呀，哎，那get style我们来找找get style诶在哪，我们看看啊。其在这个其他不是读取元素样式是吧，咱们写过一个get style方法，还记得吗？可以获取我们元素当前正在显示那个样式吧，来来，那这块呢，我更希望使用这个方法来直接把它CTRLC，然后呢，直接放在这儿CTRLV，我给它粘过来，直接放到这个全局作用域里边，我这一保存这方法是不是过来了，注释我就不要了啊，注释我不要了，那这个方法什么特点啊，它可以获取我们元素的任意的样式吧，而且什么呀，当前正在显示的样式，所以这块于换一个了，我不这么写了，直接换成什么呢？换成一个get style啊get sta，我这来什么呢？BOX1，然后逗号我想获取的是left之外，诶逗号一个left，这是不就OK了呀，一保存我们看效果，这一刷新再1.0PS是不是就获取到了啊，就获取到了啊，来再看看其他浏览器。

一点是不是0PX，哎，就有了啊，再看看我们这个IE。IE呢，我这一点，诶凹IE给我返回一个凹，为什么凹啊，因为我是没有设置啊，诶IE浏览器有这么一个特点，如果没有设置的属性，它会返回那个默认值，而live的默认值就是什么呀，Auto，所以它这是不是不会返回一个auto啊，但凹带来一个问题，我这凹我能不能计算，没有办法计算，Auto转完number是不是就是那了，哎它不能去计算，所以这块呢，凹是不行的，我不想它是凹凸，那怎么办呢？诶它为什么是凹凸，因为这块我是没有指定left呀，所以为了避免这个问题，我可以来一个left来什么呢？来一个零，这样我指定值了，它还是不是out凸了是不就不是了，诶来我们来看效果啊，这一刷新，但是你注意了，我指定完了零以后，跟我没指定有没有区别啊，没有区别，其实它本来就是零对吧，诶本来就是零，我这一点，诶是不是0PX呀，诶然后。

可以刷新走，你这属于0PX，诶这样就可以确保我可以正常的获取到这个值了，所以注意啊，我们这get style这有一个小问题，就是我们什么呀，在IE浏览器里边，如果它没有指定的这个值，有可能获取到是凹凸，那这个时候对于这种值我们尽量给它干嘛呀显示的。

指定一个啊，显示指定一个，好，那这值有了，接下来我们来看值已经有了，但是注意这个值它有没有，有没有啥问题啊，我这1.0PX，我0X加十行不行啊，加十是不是变成0PX10了呀？诶他会做这个拼串不能计算，而这个值最终我肯定是需要去计算的吧？诶那这里边我要怎么办？我说要把它转换成一个number啊，怎不转啊，加行吗？加行吗？加肯定不行吧，这个玩意儿，我们说加是用的那个number函数，如果你用那个number函数，这是一个合法数字吗？不是，所以他肯定给你转成什么呀，那而我只是想干嘛呀，我是要取出它这个有效数字呀，所以注意应该用的是谁呀，哎，我们那个pass int，那我整。

这就给它套这么一个pass，诶int，诶pass int，然后呢，我把这个值放到这个pass in这个函数里边，那现在这个值还有没有PX了，哎，咱们再看一刷新，再一点是不是就是零了呀？哎，零的好处就是我们这块就可以去计算了啊，可以去计算了，如果是一个凹或者是一个10PS我们是无法去计算的啊，所以注意pass in它是干嘛的，就是把我们一个字符串里边的合法数字给我们取出来啊，取出来好，那这个值有了，那接下来我就不用跟这取了，我把这个呢，CTRLX放到这个set inel里边，那现在这个life的这个O的Y6是不是已经有了呀？诶然后呢，我们是要修改啊，诶修改在什么呢？在我们这个就值的诶基础上干嘛呢？我要自增，诶增加什么呢？诶增加，诶增加直接写了来什么呢？挖一个拗。

Y6是不是心值啊，等于什么呢？等于old的Y6加上一个十，诶那现在什么效果？如果old的Y6是零，我这个new value6是不是变成了十啊？诶如果OLDY6是十，我new y6是变成20啊，也就说我的new y6总是比这个OLDY6是大十的对吧？诶大石的好，那有了它了，然后呢，然后呢，诶我们是不是要将这个心值，诶是不是要设置给我们这个BOX1啊，诶那怎么设置啊，Box1.1个style点一个life的等于谁呀？New y6加上一个PX，这样是不是就OK了呀？哎，好，那现在我们来说，当我一去点击按钮以后，就开始去不断的去调用我这个什么呀。定时器吧，诶开启一个定时器，开启定时器以后，就会不断的去调用我这函数一调用函数我先获取一个旧值，然后在旧值器上加一个十，生成一个新值，再将这个新值是不是赋值给我们BOX1啊，那这样我们来看什么效果，我这一刷新组你诶那现在我这个BOX1它是不是就持续的就。

就动起来了，哎，就完成了这么一个这种简单的一个动画的一个效果啊，使这个暴击持续的去移动啊，持续的移动，但是问题又来了。哥们儿。它停不下来了吧，哎，是不是一直在移动啊，那我希望什么呀？我希望你可能移到这里边的某一个位置，你干嘛呀，你停住了是不是就别动了呀？哎，就别动了，那怎么办呀？那我们说怎么让它停下来呀。诶要停下来，是不是把这个定时器给它关了就行了，诶那要关了呢，我这需要定一个变量，直接挖一个这个timer等于它，我是不是来接收一下这个定时器的标识啊，诶那这里边儿我们需要什么呢？诶我们希望当我们这个元素，诶运行到什么呢？诶当移动呢，移动到这个800像素是。

干嘛呢？使其停止执行动画啊，使其停止执行动画，诶那怎么办？首先说我怎么知道元素移动到了800像素，是不是看new y6啊，诶元素值就是这个new y6，所以我来一个什么呀，判断if，我们这个new y6等等于800，诶或者你仨等号也行啊，都行，诶等等于800，如果Y6等等于800，那怎么办？是不是已经到达我们目标啊，到达目标则什么呢？诶关闭我们这什么呀，定时气怎么关呀？哎，Clear一个in interval，我们来什么呢？来一个timer，这时候就关了呀，一保存咱们再看效果，直接一刷新移动。

诶，是不是到这儿停了呀，这个位置应该正好是那个800个像素啊，800个像素到这儿稳稳的就停下来了，我们看看是不是啊，看看是不是来，那怎么看呢，我们在这儿啊，我再整一个div，这个div呢，咱们写简单一点，不写ID了，直接写点这个内联样式，这个div我外让它来一个什么呀，诶Y咱们就来零，诶然后呢，高度来什么呢？高度来一个1000个像素，也就是说没有宽度，是不是只有高度啊，然后呢，来一个border，一个black left来一个一个像素，然后来一个black，然后来一个solid，是不是一个一个像素实验的边框啊，说白了我这个div就是一什么呀，诶就是一条线啊，就是这条线，但是这条线呢，这么写还不行，我还得再来一个，来什么呢？来一个position，来一个ABA salute，我是不是给它开启决定位啊，再来一个left，来什么呢？800个像素，是不是左侧偏移800像素啊，那我们说这条线应该。

再跟哪，你刷新是不是正好跟800像素这个位置啊，哎，有点难看，让他往上再来点来一什么呢？来一个top，再来一个零，是不是能贴贴到最上面啊，一保存咱们一刷新走，你是不是贴过来了，诶这条线就像什么呀，就像我们这个跑步那个什么了终点一样，它正好是800个像素，也就是说我这个方块到这儿是不应该正好就停住啊，诶我们来看看是不是啊是不是啊来预备。走。看。是不是正好在这个线这停着了，哎，稳稳的是不是停在这儿了，诶贴的非常紧啊，正好是800个像素，诶但是现在我们来看这有没有什么问题啊，现在我这判断的是移个什么呢？如果它等等于800，我说那停了呀，诶那现在我这个十是每次移动十个像素，对吧？来我换一个不移动十了，移动一个什么呢？11啊，移动一个11，现在我是每次移动11个像素，我们来看看啊，它还停不停了，我这一刷新来走你。

哥们冲下了是吧，哎，咋不停了呀？哎，刚才我们是加十加十，我是不是每次都加十啊，好，你加十加十加十总有一次是不是能加到这个800啊，诶啊好了，那你现在加几了？加十一十一加11加11 11加起来能不能加到800啊，不能，他只能是在800左右吧，可能比800小，可能比比800大，能不能到这个正好800啊。到不了，那他到不了800，也就说这个条件能不能满足不能满足，所以他可能最后加到800多，然后干嘛了，是不是一直往后走了，诶所以这写等于800呢，也要那不合适啊，所以写什么呀，大于等于800对吧？诶大于等于800，如果你得比八八百大，或者和800相等，我就让你停掉，这样行不行呢？我这一保存一刷新走，你这个肯定能停了，看但是是不是过劲了呀，诶咱们来这这要再大一点，比如说我来一个这个19。

你刷新走你。是不是过得更多了呀？诶，那这块就不好了，为什么？因为你要执行一个动画，这动画效果的执行的时候，即使过一点，我们看的效果是不是也可能千差万别呀，不好，我还是希望什么呀，你稳稳的停到这条限制，那怎么办呢？那首先这就不能写大于等于了，还得写什么呀，等于等于又有问题，等于是不是停不住啊，那怎么办呢？哎，注意了，在这，这是什么呀，这是在我修改这个样式值的之前嘛，我在这儿做一个判断，判断什么呢？判断我们这个new value是否大于等于800，直接来一个if new value就不用等于了，直接什么呀，是否大于800 if new value大于800，诶，这出现问题了，New value大于800了，我们说了我们能接收的最大值是多少啊，是800，但是现在你是不是比800大了呀，诶，那我这干脆干嘛让你，哎是不是等于200啊。

哎，等于一个800，也就是说你最大值是不是就800了呀？好，那现在问你，当运行到这儿的时候，这个new y6有没有可能大于200了，诶一旦大于200，我说那等约百了，诶所以就不会出现这种情况了啊，我这一保存咱们再来看一刷新来走你。是稳稳的停到这儿了，哎，稳稳停到这，即使你说你再整一数，你整一个三十九一保存一刷新。是不是也没事了呀，哎，总是能稳稳的停到这条限制啊，这条限制，所以这块一定要注意这个判断，它都是一些必须的啊，都是必须的，好，那这块我们就写完了，那这39呢，这块实际上是相当于我们一个移动的一个速度是吧，哎，来，那我现在把它干嘛呢？来个一，我是不是要给它。

调慢一点啊，诶调慢一点，我这一保存咱们再看刷新一下再移动走你诶是不是就移动的特别特别的特别特别慢是吧？哎，感觉有点那个有条不紊这种感觉是吧？诶我一点移动的特别慢，但是注意了刚点一下是吧，走走走走走走走走干嘛了，走走走走走走是不是点的越多就越快了呀，这玩意挺好玩是吧？大家注意为什么会越来越快呀，为什么呀，是不是点一次就开启一个定时器，点一次开一个定时器啊跟我们上午那个图片切换速度过快是不是一个原因啊，哎，一个原因，所以这里边我们说我希不希望它快啊，我希望我设置的是什么速度，它就是什么速度吧，诶所以这块快了就不好了，那应该怎么办？

哎，我是不是应该在开启这个定时器之前，我把上一次那个给它关了呀，哎，关了，所以在这里边呢，在这儿我们要干嘛呢？我们要关闭这个上一个这个定制器，直接来一个可粒尔inel尔，来一个这个timer，但是问题又来了，现在这是一个局部的一个变量嘛，每次他都会新建，所以你定在这里边呢，那不好，那怎么办呢？诶还是放到这个外，诶只要他们能访问到就行了啊定义到这个外边直接来一个什么呢？我也不用赋值这写一个定义一个这个变量，诶用来保存我们这个定时器的这个标识啊标识，那现在这个Y我就干嘛了，就千万别写了啊，千万别写了，好，那这个TIMER1上来它是安fun的，那我问你了，在这儿会不会报错啊，诶不会没有它就不停了，对吧，哎就不停了，我这一保存，这回我再一看一点是不是没有的呀，点点。

点点点有没有影响，哎没有影响，因为你点的同时它是不是又开了一个，哎，又开了一个啊，就不会再产生这个影响啊，就不会产生影响了，好那这一块呢，是我们说的这个整个这么一个简单的功能就给它完成了啊，功能比较简单，但是你要看一下我们之前用的一个这个get style来获取它的这个值，还有一个是我们这什么呀，整个动画执行的时候，一个这个终止一个条件啊，给这个东西呢，好好的去看一下啊，好好看一下，好，我们这先停一下。