00:00
好,倒计时这块呢,首先啊,我们就像就是你写的时候也可以先参考参考,然后你再写啊好,然后呢,我们在这个地方呢。写一下就是cancel.loud。倒计时对吧,我们来看一看他能不能走进来啊。那怎么看呢?F12,然后cancel。然后在这个地方呢,我们把页面刷一下。刷牙之后呢,我在这个地方呢,还是录入手机号。然后呢,点击这个获取验证码,大家看直接是不是就进入了倒计时啊,啊,所以针对倒计时的处理呢,我们就在这个地方去给他完成一下,那么接下来呢,我们来看一下啊,那倒计时怎么做呢?首先第一件事情就是啊,我刚才那个位置,它很显然显示的是零对吧,我得显示一个倒计时的这个秒数,那倒计时的秒数在哪定义的呢?在这。
01:06
这个呢叫做倒计时时间啊,为了一会儿方便测试,我就不用设置那么长的时间了,我设置了一个十秒的倒计时,然后接下来呢,这块呢,就是剩余时间,好,然后那我们很显然剩余时间目然目前为止是零,所以呢,我们进入倒计时之后呢,就要把倒计时的时间复制给剩余时间。这样去写明白吧,啊,所以看一下。好,大家看这块是不是啊,剩余时间已经付给倒计时时间了啊,所以十秒后重发,那接下来我们要做什么呢?接下来我们要做的就是每隔一秒将这个值减一对吧?啊,让它实现一个计时器的功能,那么计时器的功能呢,在javascript当中,它有一个原生的一个函数啊,叫set interval,这个其实就是计时器,好然后这个嗯,Set interval呢,它接收一个函数类型的参数,这个函数类型的参数呢,我们可以用这个箭头函数的形式来写好,然后这个函数型类型的参数呢,就是在计时的过程当中我们做什么,然后计时器的这个计时功能在哪体现呢?在它的第二个参数当中体现,所以这个set方法它有两个参数。
02:36
第一个参数是一个函数类型的参数,第二个参数呢,就是时间间隔,那我们可以写,比如说每隔一秒,那就是1000毫秒,所以呢,就是每隔1000毫秒做。这个函数里面的事情,那所以在这个地方,我如果在这块打印。打印呢,我直接打印一下当前时间吧,好,大家看他是不是每隔一秒打印一下当前时间。
03:08
看一下。啊,大家看现在呢,它就会每隔一秒39,四十四十一,42 43,对不对,每隔一秒打印了一下当前的时间,那这样的话,我们就完全可以利用它这个特性了,那我们来看一下怎么去做呢?在这面我们就每隔一秒。切换就是去做一个减法,第四减啊left second减减啊明白这意思吧,啊好,然后可以看一下。好,大家看这面十九八七六五四三二一。
04:03
零负一是不是有问题,所以呢,这个地方也要去给它做一个处理啊,那怎么处理呢?在这个地方做一个判断,If if啥呢?If这个this,第2LEFT second啊,如果小于等于零了,那么我们就停止啊,计时器啊,怎么去停止计时呢?我们停止计时的方式呢,叫做clear。Interval啊,开始计时呢叫set interval,停止计时呢叫clear interval clear inter呢,你要给他传递一个参数,这个参数呢就是计时器的引用,计时器的引用在哪?我们要把前面这个计时器呢,复制给一个变量啊,比如说cost等于。Timer,哎,不对,Cost timer等于哈,好这个呢,就是我们前面创建的一个计时器的一个引用了,好我们把引用给他,这样的话呢,我们的计时器呢,就能够。
05:13
停止了啊,就能够停止了,然后接下来呢,我们再来看一眼。这样写。然后点击这个获取验证码。啊,大家看9876。54321。行。停掉了是不是啊,停掉了之后呢,大家想一想,就是这个代码哈,你会发现你可以水到渠成的完成,就是你前一个功能做好了,马上就这个下一个问题就暴露出来了,下一个问题是什么,我是不是要还原它呀,对吧,那所以呢就还原了。就在这个地方呢,就还原了第四点三点。
06:03
等于把它还原啊好,然后接下来再看。1376616630,然后点击获取。好,还原了没?是不是还原了又可以获取验证码?注意啊,此时此刻我再来点击获取验证码。是不是就可以了啊就可以了,所以呢,这块呢,就是我们的一个获取验证码啊的一个功能的一个实现。
我来说两句