进度条的书写大量使用css样式 progress-end是进度条上的小圆圈，在进度向前走的时候小圆圈也跟着向前走
<div class="grade">
<label class="progress">
<label class="progress-content"
:style="{width:(parseInt(msLength)/600000*100)+'%'}"><label class="progress-end"></label>
</label>
</label>
</div>
在data中定义
msLength:0,
ms:0, 毫秒
s:0, 秒
time:0,
timeLength:0, 时长
endTimeLength:0,
利用计时器
// 计时器
countdown(){
this.ms=this.ms+50; //毫秒
this.msLength += this.ms
if(this.ms>=1000){
this.ms=0;
this.s=this.s+1; //秒
}
this.timeLength = this.toDub(this.s）
},
toDub(n){ //补0操作
if(n<10){
return "0"+n;
}else {
return ""+n;
}
},
调用时 先清除
beginRecors() {
clearInterval(this.time);
this.timeLength = 0
this.msLength = 0
this.ms=0;
this.s=0;
this.time = setInterval(this.countdown,50)
},
结束时 保存timeLength时长到endTimeLength
overSoundRecord() {
clearInterval(this.time);
this.endTimeLength = this.timeLength
this.msLength = 0
},
css样式：
.grade {
display: flex;
align-items: center;
.progress {
display: flex;
align-items: center;
position: relative;
width: 823px;
height: 10px;
background-color: #96daf9;
border-radius: 5px;
.progress-content {
position: absolute;
height: 10px;
background-color: #29a1d9;
border-radius: 5px;
.progress-end {
z-index:1;
position: absolute;
right: 0;
top: -9px;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #29a1d9;
}
}
}
}