00:01
下面呢,我们来开发支付页面的这个倒计时效果。我们一起来看怎么做啊。正常情况下呢,这个时间应该由这个订单返回给我们,我们根据返回的这个订单呢,来进行倒计时。那咱们这呢,因为请求响应的数据,它是没有这个时间的啊,所以说我们自己来给它生成一个时间,然后进行倒计时。下面一起来看。来到支付页面。我们可以初始化一个倒计时的时间,Time。它呢是15分钟啊,15分钟就是15乘以。啊,60对吧,这样的一个时间,这是。因为一分钟60秒嘛,乘以15不就是15分钟吗。好,当然,如果你直接拿这个time去上面显示没任何意义啊,我们现在要给他个倒计时,那么这时候我们需要给他一个CS1上来源的一个4S。
01:00
每隔一秒钟,我们让这个time要解。每隔一秒钟,这个碳减减。倒计时嘛,同时呃,我们还需要定义一个存储time的一个time ID。因为一旦他减到零的时候,咱们就要拜拜了啊。你不能解到零还在解。要肯定要一头。好这样的一个倒计时的一个效果。那么倒计时的时候呢,我们就要把时间在这个交易剩余时间这里显示。好,此时呢,我们可以看一下效果,当然现在效果并没有完成,因为咱们还差一些内容。
02:10
我们能看到这个时间的确在倒计时,但是它倒计时时间是拿个900那个秒来去计算的,这样用户完全看不懂什么意思啊。所以我们希望它把它变成一个分钟那样,比15.00 14.59这样的一个倒计时效果。好,那么要做这个的话呢,我们就要对这个时间进行格式化,这时候一样的可以用上计算属性。怎么格式化呢?我们拿到这个time。我们用一个date。所以像。通过代对象的一些方法我们来操作啊,但是因为我们的单位是秒,而代对象要求的单位是毫秒,所以说我们要乘以1000,把它放大一千倍来算啊。
03:01
放到完1000之后呢?我们可以通过date get minute这个方法得到它对应的是多少分钟。那么我们记作分钟,记作M,同时得到一个方法get second。可以得到它的一个秒。那么最终返回就是。就是M冒号。这样的一个事件,对吧,我们可以把这个format time在上面进行展示,这样的话呢,它就进行了格式化。好,我们继续试试,我换一个商品,不能老是一个商品啊。介绍。提交。好,这时候大家看到他这个倒计时就对了,但是这时候倒计时有个问题,就是它得到分的时候,如果是1234,它最终是一冒号零几减几对吧,然后如果是秒的话呢,它也是啊,倒计时的时候是比方说14分钟点一秒点二秒这样的。
04:03
好,我们希望呢,如果是单数呢,我们补一个零,这样呢,它比较对称,更好看啊。所以这时候我们得到这个M呢,不能直接去得到。我们得补零,懂吗?所以说一般来讲,我们这里还有个补丁操作。五零其实判断方法很简单,M就等于什么呢?如果M小于十,那么它就要加一个零。那么大于十大于等于十,那就不需要操作了,大概是这样的,就补个0S也是这样的。好了,补完零之后呢?那我们的倒计时才会有最好的效果,最完美的效果。那看啊,你看它就有这个零了,刚刚就有那个零了。
05:01
好了,那么这里呢,我们就完成了这个倒计时的这个功能。
我来说两句