为什么拖动进度条后要按两次才可以暂停
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<style>
*{margin: 0;padding: 0;}
.outerNode{width: 505px;height: 406px;position: absolute;
left: 50%;top: 50%;margin:-203px 0 0 -252.5px;
border: 1px solid #a6a18d;border-radius: 8px;
box-shadow: 0 0 16px #a6a18d;}
.innerNode{width: 504px;height: 405px;border-top: 1px solid #e1d1b9;
border-left: 1px solid #ceccbf;border-radius: 8px;overflow: hidden;}
.top{width: 100%;height: 198px;border-bottom: 1px solid #787463;
box-shadow: 0 2px 2px #a6a18d;background: url("2B and A2 - Nier.jpg") no-repeat center center;
background-size: cover;}
.line{width: 100%;height: 46px;border-top:1px solid #f9f7ee;
border-bottom: 1px solid #a29d8a;background-color: #d7d3b2;}
.progress{width: 440px;height: 12px;float: left;margin: 13px 0px 0px 28px;border: 1px solid black;
border-radius: 12px;box-shadow: 0px 2px 2px white;overflow: hidden;position: relative;}
.trueline{height: 100%;width: 0px;border-radius: 8px;background: linear-gradient(white,green);}
.bottom{width: 100%;height: 157px;border-top: 1px solid #a29d8a;
background: linear-gradient(white,#d7d3b2);position: relative;}
.contorl{width: 50px;height: 50px;border-radius: 50%;background:linear-gradient(white,#d7d3b2);
box-shadow: 0 0 16px #a6a18d;position: absolute;top: 50%;left: 40%;
margin-top: -25px;margin-left: -25px;text-align: center;line-height: 50px;}
.contorl.prev{transform: scale(0.6);left: 25%;}
.contorl.next{transform: scale(0.6);left: 55%;}
.contorl.stop{transform: scale(0.6);left: 75%;}
</style>
</head>
<body>
<div class="outerNode">
<div class="innerNode">
<div class="top"></div>
<div class="line">
<div class="progress">
<div class="trueline"></div>
</div>
</div>
<div class="bottom">
<div class="prev contorl"><i class="fa fa-fast-backward"></i></div>
<div class="play contorl" attri = "notplay"><i class="fa fa-play"></i></div>
<div class="next contorl"><i class="fa fa-fast-forward"></i></div>
<div class="stop contorl"><i class="fa fa-stop"></i></div>
</div>
</div>
</div>
<script type="text/javascript">
var myaudio = new Audio();
var play = document.querySelector(".play");
var stopmc = document.querySelector(".stop");
var playicon = play.querySelector(".fa");
var line = document.querySelector(".trueline");
var progress = document.querySelector(".progress");
var outerNode =document.querySelector(".outerNode");
myaudio.src = "Nier.mp3";
play.addEventListener("click",function(){
if(this.getAttribute("attri") == "notplay"){
myaudio.play();
this.setAttribute("attri","play");
playicon.className = "fa fa-pause";
}else{
myaudio.pause();
this.setAttribute("attri","notplay");
playicon.className = "fa fa-play";
}console.log(this.getAttribute("attri"));
})
stopmc.addEventListener("click",function(){
myaudio.currentTime=0;
myaudio.pause();
play.setAttribute("attri","notplay");
playicon.className = "fa fa-play";
})
myaudio.addEventListener("timeupdate",function(){
var totaltime = parseInt(myaudio.currentTime);
var s =totaltime%60;
var m = parseInt(totaltime/60);
var time = m+":"+s;
var progress = parseInt(myaudio.currentTime)/parseInt(myaudio.duration);
line.style.width= (440*progress)+"px";
console.log(progress);
console.log(time);
})
progress.onclick = function(e){
myaudio.pause();
var l = e.clientX - (this.offsetLeft+outerNode.offsetLeft);
line.style.width = l+"px";
myaudio.currentTime = myaudio.duration*(l/440);
console.log(l/400);
myaudio.play();
this.setAttribute("attri","play");
playicon.className = "fa fa-pause";
}
</script>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星