上图中语音的长度和点击后自动播放的动画样式是通过js设置的。
点击后播放代码:
var timerL = setInterval(
function(){
play.style.animation = "playLeftVoice 1s linear infinite";
if(time==0){
clearInterval(timerL);
}else{
time--;
}
},500);
语音长度控制代码:
if(element){
if(len<3){
element.style.width='63px';
}else{
element.style.width=(63+len)+'px';
}
i++;
}else{
i++;
}
这两个效果是两个函数分别实现的,先实现的语音播放功能,播放时测试动画可以正常运行与停止,后实现的控制语音长度,结果发现动画停止失效,点击语音之后图标动画一直在循环,检查代码发现play.style.animation = "playLeftVoice 1s linear infinite";这个样式一直存在,也尝试过不用定时器直接清除该样式,play.style.animation="",但是还是无效。
点击前的样式:
点击后的样式(语音播放后还是这样,动画样式清除不了)
同学。你计时器停了木有?计时器内部变量的引用分离了没有