进度条无法拖动
麻烦老师帮忙看一下为什么进度条无法拖动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mp3自定义播放器</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.outerNode{
width: 505px;
height: 406px;
position: absolute;
left: 50%;
top: 50%;
margin: -204px 0 0 -253.5px;
border: 1px solid #a6a18d;
border-radius:8px;
box-shadow: 0 0 16px #a6a18d;
}
.innerNode{
width: 503px;
height: 405px;
border-top: 1px solid #e1d1b9;
border-left: 1px solid #ceccbf;
border-right: 1px solid #ceccbf;
border-radius: 8px;
overflow:hidden;
}
.topNode{
width: 100%;
height: 198px;
border-bottom: 1px solid #787463;
background:url(music/pic/fmt01.jpg) center center;
background-size: cover;
}
.lineNode{
width: 100%;
height: 46px;
border-top: 1px solid #f9f7ee;
border-bottom: 1px solid #a29d8a;
background: url(musicimage/linebg.jpg) repeat-x;
}
.progressNode{
width: 440px;
height: 18px;
float: left;
margin: 13px 0 0 28px;
background: url(musicimage/progressbg.jpg) repeat-x;
position: relative;
}
.progressleft{
position: absolute;
left: 0;
width: 7px;
height: 100%;
background: url(musicimage/leftNode.jpg);
}
.progressright{
position: absolute;
right: 0;
width: 7px;
height: 100%;
background: url(musicimage/rightNode.jpg);
}
.bottomNode{
width: 100%;
height: 157px;
border-top: 1px solid #a29d8a;
background: url(musicimage/bottomBg.jpg) repeat-x;
position: relative;
}
.lastNode{
position: absolute;
width: 75px;
height: 74px;
background: url(musicimage/lastBg.png) no-repeat;
top: 39px;
left: 125px;
cursor: pointer;
}
.playNode{
position: absolute;
top: 29px;
left: 202px;
width: 95px;
height: 94px;
background: url(musicimage/playNode.png) no-repeat;
cursor: pointer;
}
.nextNode{
position: absolute;
width: 75px;
height: 74px;
top: 39px;
left:306px ;
background:url(musicimage/rightbg.png) no-repeat;
cursor: pointer;
}
.volumeNode{
position: absolute;
top: 58px;
right:43px ;
width: 37px;
height: 32px;
background: url(musicimage/volume.png) no-repeat;
cursor: pointer;
}
.no_volumeNode{
width: 37px;
height: 32px;
background: url(musicimage/no_volume.png) no-repeat;
position: absolute;
right: 43px;
top: 58px;
cursor: pointer;
}
.trueLine{
position: absolute;
left: 3px;
top: 2px;
height: 12px;
width: 0%;
background:url(musicimage/green_bg.png) repeat-x;
border-radius: 6px;
border-right: 1px solid #787463;
}
</style>
</head>
<body>
<div class="outerNode">
<div class="innerNode">
<div class="topNode"></div>
<div class="lineNode">
<div class="progressNode">
<div class="progressleft"></div>
<div class="progressright"></div>
<div class="trueLine"></div>
</div>
</div>
<div class="bottomNode">
<div class="lastNode"></div>
<div class="playNode"></div>
<div class="nextNode"></div>
<div class="volumeNode"></div>
</div>
</div>
</div>
<script type="text/javascript">
//给播放器添加js
var myAudio = new Audio();
myAudio.src = 'music/mus/AcousticGuitar1.mp3';
var playBtn = document.querySelector('.playNode'),
playBln = true,
volumeNode = document.querySelector('.volumeNode'),
volumeBln = true,
trueLine = document.querySelector('.trueLine'),
progressNode = document.querySelector('.progressNode'),
outerNode = document.querySelector('.outerNode');
//播放暂停的事件
playBtn.onclick = function(){
playBln = !playBln;
if(playBln == false){
myAudio.play();
}else{
myAudio.pause();
}
};
//声音的事件
volumeNode.onclick = function(){
volumeBln = !volumeBln;
if(volumeBln == false){
myAudio.volume = 0;
this.className = 'no_volumeNode';
}else{
myAudio.volume = 1;
this.className = 'volumeNode';
}
};
//播放时 进度条的长度控制计算（监听timeupdate事件）
myAudio.addEventListener('timeupdate',function(){
trueLine.style.width = myAudio.currentTime / myAudio.duration * 100 + '%';
});
//点击progressNode元素，让进度条直接到达这个位置
progressNode.onclick = function(e){
var ev = e || event;
//算法就是算出点击的位置在外层进度条的多少像素
//需要一个鼠标坐标点，减去外层元素的offsetLeft和最外层元素的offsetLeft
myAudio.currentTime = myAudio.duration * ((ev.clientX - (this.offsetLeft + outerNode.offsetLeft))/this.offsetWidth);
trueLine.style.width = ((ev.clientX - (this.offsetLeft + outerNode.offsetLeft))/this.offsetWidth) * 100 + '%';
};
</script>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星