本节概览：

  这一章主要分享两个东西，分别是进度条和音轨。进度条相对来说比较简单，于是先讲。

  音乐播放器概览

  这是上一次绘制好的音乐播放器，本节也在它的基础上进行完善。

  进度条

  对于进度条，它可以实时地展示音乐的进度，相信大家都不陌生。

  1.绘制进度条

  我们在按钮区的上面，也就是屏幕底部的区域绘制进度条。

  上代码：

  

  代码中progress的部分就是我们需要添加的进度条区域。

  给它宽度、高度和背景色：

  

.music .screen .progress {
 width:100%;
 height:40px;
 background:#ccc;
}

  音乐播放器概览

  我们希望让它紧挨着播放器屏幕的底部，只需要给它一个定位就行了。关于元素的定位，在之前的章节中我已经详细地讲过，所以在这里就不再赘述了。

  

position: absolute;
bottom:0;

  音乐播放器概览

  下来了。

  我们将该区域分为上下两块

  

.music .screen .progress .time {
 border-bottom:1px solid #fff; /演示用，为了看清楚上下元素块的界限/
 height:20px; /高度为父盒子的一半/
 line-height:20px; /为了让文字垂直居中/
 text-align: right; /文字右对齐/
}

  加上一个测试的时间数据：

  

1:30

  音乐播放器概览

  确认没问题后，把背景色和边框都去掉。同时调色和优化一下：

  

.music .screen .progress {
 width:100%;
 height:40px;
 position: absolute;
 bottom:0;
}
.music .screen .progress .time {
 color: #fff;
 height:20px;
 line-height:20px; /为了让时间垂直居中/
 text-align: right; /文字右对齐/
 padding-right: 10px;
}

  音乐播放器概览

  这样就好看多了吧。

  2.动态获取变化的时间

  一步一步来，接下来我们先拿到正在播放的时间：

musicBox.musicDom.ontimeupdate = function(){
 var currentTime = Math.floor(this.currentTime); //获取当前时间
 var m = parseInt(currentTime / 60);//分钟
 var s = parseInt(currentTime % 60);//秒钟
 var time = (m
 
 
TAGS：效果 js进度条效果 js进度条显示百分比 进度 文件上传进度js 绘制 迷茫 宽度 
 
 !如链接失效请在下方留言。本站所有资源均来源于网络，版权属于原作者!仅供学习参考，本站不对您的使用负任何责任。如果有侵权之处请第一时间联系我们删除，敬请谅解!