老师，请回答
来源：4-4 video-javascript（1）
慕设计6552984
2020-04-24 17:11:05
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
.outerNode{
width:540px;
height:332px;
position:absolute;
left:50%;
top:50%;
margin:-166px 0 0 -270px;
box-shadow:0 0 4px #5b606d;
}
.outerNode .videoNode{
width:540px;
height:305px;
float:left;
background:black;
}
.outerNode .controlsNode{
width:540px;
height:27px;
float:left;
background:url(1/ctrs_bg.gif) repeat-x;
cursor:pointer;
}
.outerNode .controlsNode .playNode{
width:15px;
height:17px;
margin:6px 0 0 14px;
float:left;
background:url(1/playNode.png) no-repeat;
}
.outerNode .controlsNode .pauseNode{
width:15px;
height:17px;
margin:6px 0 0 14px;
float:left;
background:url(1/pauseNode.png) no-repeat;
}
.outerNode .controlsNode .loadNode{
width:267px;
height:10px;
margin:9px 0 0 14px;
float:left;
background:url(1/load_bg.gif) repeat-x;
position:relative;
}
.outerNode .controlsNode .loadNode .loadLeft{
width:100%;
height:3px;
position:absolute;
left:0;
top:0;
background:url(1/left_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .loadRight{
width:100%;
height:3px;
position:absolute;
right:0;
top:0;
background:url(1/right_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .crlNode{
width:17px;
height:17px;
background:url(1/crl_bg.png) no-repeat;
position:absolute;
top:-3.5px;
left:-8.5px;
cursor:pointer;
}
.outerNode .controlsNode .timeNode{
width:55px;
height:10px;
float:left;
margin:9px 0 0 9px;
}
.outerNode .controlsNode .timeNode span{
font-size:10px;
float:left;
color:white;
line-height:10px;
}
.outerNode .controlsNode .volumeNode{
width:17px;
height:16px;
float:left;
margin:5px 0 0 16px;
background:url(1/volume_bg.png);
}
.outerNode .controlsNode .volumeLine{
width:61px;
height:8px;
float:left;
margin:10px 0 0 4px;
background:url(1/volumeLine_bg.png) repeat-x;
}
.outerNode .controlsNode .volumeLine .v_left{
width:3px;
height:100%;
position:absolute;
left:0;
top:0;
background:url(1/v_left.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_right{
width:3px;
height:100%;
position:absolute;
left:0;
top:0;
background:url(1/v_right.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_DragNode{
width:15px;
height:13px;
position:absolute;
left:-5.5px;
top:-3.5px;
background:url(1/vo_d.png) no-repeat;
cursor:pointer;
}
.outerNode .controlsNode .fullNode{
float:left;
margin:6px 0 0 50px;
width:15px ;
height:17px;
background:url(1/full_bg.png) no-repeat;
cursor:pointer;
}
</style>
</head>
<body>
<!-- 最外层的元素 -->
<div class="outerNode">
<!-- video元素 -->
<video class="videoNode" src="imooc.mp3" poster="poster.jpg" ></video>
<!-- 控制器的元素 -->
<div class="controlsNode">
<!-- 控制播放暂停的按钮 -->
<div class="playNode"></div>
<!-- 控制video的进度条 -->
<div class="loadNode">
<div class="loadLeft"></div>
<div class="loadRight"></div>
<!--拖动进度条的按钮-->
<div class="crlNode"></div>
</div>
<!--时间的元素-->
<div class="timeNode">
<span class="now">1:30</span>
<span>-</span>
<span class="all">4:30</span>
</div>
<!--声音的标志-->
<div class="volumeNode"></div>
<!--声音的进度条-->
<div class="volumeLine">
<div class="v_left"></div>
<div class="v-right"></div>
<div class="v_DragNode"></div>
</div>
<!--全屏按钮-->
<div class="fullNode"></div>
</div>
</div>
<script>
//播放暂停的控制
//playNode是播放器按钮
//videoNode是播放器
var playNode=document.getElementsByClassName("playNode")[0];
playNode.onclick=function(){
//可以使用classList.toggle方法来切换
// this.classList.toggle('pauseNode');
//通过传统的布尔值去改变classname的方法
playBln=!playBln;
if(playBln==false){
this.className='pauseNode';
}else{
this.className='playNode';
}
}
</script>
</body>
</html>
老师，切换暂停键为什么没有效果
1回答
-
好帮手慕慕子
2020-04-24
同学你好，因为playBln没有声明直接就是用了，导致代码报错，所以没有效果。
建议修改：提前声明变量playBln.
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题