00:01
好,那我们继续啊,那上一节课呢,我们把这个,呃,这个进度条的控制区域呢,静态大家已经完毕了,那这一节课呢,我们去把这个时间啊,尤其是这个总时长,我们先给他动态的去显示一下。那么要显示这个总时长呢?我们先不管别的啊,我们是不得知道当前音乐的时间呀。那如何知道当前音乐的时间呢?来当初啊,我们在拿到这个歌曲的详情对象的时候呢,大家看啊,在这个里边呢,有一个属性,我们找一下叫DT。也就是说,在当前歌曲的详情对象so下边的DT。啊,你看这个时间其实就是当前歌曲的总时长。第一题呢,指的是time啊,就总时长,那么对应的这个时长呢,很明显啊,它对应的单位是什么呀?是毫秒。20毫秒。而毫秒的话,你看啊,转换成秒,然后再转换成分是260秒,然后就是四分多对不对,四分多,哎,那这个时候呢,大家看我写好的这个项目啊,这很明显啊,这就是四分20秒对吧。
01:10
好了,那现在啊,我们知道了这个总时长以后呢,那上来我们给人家显示的时候呢,我们就要。把这个总时长呢,去显示到页面上对吧,那要显示到页面上呢,你要注意啊,这个实时的时间和总时长其实都是动态的。所以呢,我给他俩呢,初始化一个变量,哎,这个呢,我们叫它current time。圈下边这个呢来。嗯,我们叫它A。总时长,那么对应的呢,我们到我们的GS里边啊,去定一下变量。过来。好的,首先来到我们的data中啊。哎,定义一下,注意啊,你因为你要初始化显示呢,所以呢,我们初始化的结构呢,还是用这个年龄来保,呃保证啊,我们上来有显示内容。
02:03
然后呢,我们还应该有一个哎,Duration time,那这呢默认也应该是零零对吧?啊,那这个呢,是啊总时长,嗯,而上边这个啊,是啊实时的时间。嗯,没问题,好的,那现在啊总时长这我们怎么想办法给它显示出来呢?当初我们在nold中上来获取音乐详情的时候,我们调了这个方法。啊,那get your iner的方法呢?在哪呢?在来我们把收起来啊在这,那么在这里我们。是不是能够拿到这个音乐的对象呀?这一堆其实就是这个放对象,那么在它的里边是吧,有一个DT。对吧,第二第一呢,其实就是音乐的当前音乐的时长。但是吧,这个单位呢,是什么呀。是毫秒,而我们页面上显示的这个很明显呢,是以分钟为单位,而且呢,时间的格式呢,必须是这种啊,零零冒号零零的格式。
03:10
哎,那如何将毫秒的单位转换成这种单位呢?那这个时候呢,我们又需要用到一个第三方的库啊来。啊,这个空呢,也是比较常用的啊,给大家搜一下叫moment啊GS。啊,对应的是这个官网,嗯过来,那么这个呢,是专门用于处,用于去处理我们日期包括时间的一个。GS库首先要用它的第一步呢啊,我们肯定要干嘛,肯定要去下载安装,哎,没有问题,来在看之前呢,我们先让它装着啊。走。好的,那这边装着啊,装着呢,以后呢,我们来看一下啊,在它的里面呢,有一个文档。文档里面在显示啊,在右侧这呢,第一个方法呢叫format。这个呢,可以帮我们去格式化成指定的格式啊将。
04:04
那连起来说呢,那就是将指定的时间啊,那格式成指定的格式。那这个format里边要传一个什么参数呢?往下看,下边这呢,有一些事例啊,什么小D呀,大M呀,这是干嘛的呢?来下边这呢说明。你比如说暂的话啊,你要整成这种零音乐了,你就有两个档案嘛。对吧,要转成一二这种呢,用一个大M。那么这些呢,是对这个日期进行处理的啊,我们再往下看呢,下面呢,有针对于时间的处理。现在呢,我们要让它处理成分钟的啊,所以呢,我们要看的是这一块,那么我们要要的是这种零零的格式,对不对,所以呢,我们需要用到的是两个小M。而秒钟的话呢,那不用说了,是两个小S。好的,那这个到底怎么用呢?上面这呢有示例啊有示例这么是吗。
05:01
嗯,那现在呢,我们下载完这个以后呢,我们去引入一下。来。嗯,这个啊,我们就叫它一个moment from一个moment,注意啊,那这个时候呢,我引入了以后来到我们的项目。这上来又报了一个错,还是不是还是从当前页面的相对路径出发的呀。哎,那这个呢,我们说过啊,小程序加载第三方的包,它呢一定会去哪去这个。迷你NPM下面去找啊,如果有我就用,如果没有我就从当前的位置以相对路径的方式去查找,那肯定找不到了。这个时候大家看啊,我们在你这个下面呢,它并没有因为我们NM呢,下载到下载到这个E。所以我们是不还需要去干嘛,通过构建的方式呢,让它编译到这个里边呀。哎,别忘了啊,哎,如何构建呢?我们也讲过了啊,在我们的开发工具中选择工具,点击构建NPM。
06:05
就OK了。要注意啊,我第一次用这个的时候呢,哎,我也发现了这有一些提示啊,但是呢,后来发现啊,这个呢,对我们的使用并没有任何的影响啊,所以呢,我们点击一个确定,大家看报错就没有了。对吧,那么接下来来我们在这儿呢,去用一下这个moment啊,用一下这个moment在哪用呢?就是在我们拿到这个。哎,关于我们歌曲信息对象这个里边,哎这个之后呢,我们去用一下啊,那这呢我let一个duration,哎,Time等于什么呢?等于这个moment.permit后边呢,我们已经很明确了啊,我们要格式化的,格式是这样的,注意啊,中间因为我们的实践中间是不是用个冒号隔开啊,所以我们也给它加一个。那这个呢,是指定要格式化,也是要输出的这个格式,那么前面这个参数呢,其实就是最终我们要交到人家手上,手上的什么呀,时间。
07:05
别忘了点一个什么点一个啊,DT是我们最终的这个时间,而它的单位是什么呢?单位是毫秒。对吧,那写完这一步以后呢,那你格式化完的内容。啊,我正好定义了个变量呢,叫time,目的呢是为了跟中这个保持一致啊,那这样的话呢,我们在更新的时候呢,是直接就可以把它丢进去。就不需要再选多余的代码了,好的,那这个时候呢,我们再来看一下。还是看练习啊走。四分20秒啊,格式化没有问题啊,好的啊,那这是这个啊,那看完这呢要注意一下啊,那这里的单位是毫秒,那说明moment这要求传入的单位正好是什么呀,正好是毫秒。OK啊,那这个啊,就是我们总时长的一个动态显示。
08:01
哎,总时长的动态显示。好,那这节课呢,我们先讲到这里。
我来说两句