网页设计|音乐播放制作(html css js)
音乐播放制作简单的html css js
-
- 音乐播放/暂停:
- 音量
- 关于选择器
- 效果图:
1.提出问题
【网页设计|音乐播放制作(html css js)】和音乐有关的一些代码?
音乐播放/暂停/?
音乐的音量?
做的不完善(还有一些没做)欢迎大家评论
音乐代码:
1.
src=https://www.it610.com/article/“音乐地址”;
音乐播放/暂停: video.play();
video.pause();
video.volume 音量值
音量 2.video.volume音量值可以使用
input type=range 滑动条调节,用js:使input的value值给video.volume;
关于选择器 document.getElementsByClassName
document.querySelector 区别
document.getElementsByClassName :元素集合
只能
var button= document.getElementsByClassName(“button”);
button.onclick 错误(button是集合)
button[0].onclick 正确
document.querySelector 获取第一个元素
一点击button 改变:
图片地址切换
音乐地址切换
text里面信息改变
textContent
button1.onclick=function(){video.src="https://www.it610.com/个人页面制作/不是花火呀 - love me (片段).mp3";
video.play();
text1.textContent="‖";
nav1.children[0].style.color="blue";
image.src="https://www.it610.com/个人页面制作/2052545.jpg";
text4.textContent="?";
text2.textContent="?";
text3.textContent="?";
nav1.children[1].style.color="black";
nav1.children[2].style.color="black";
nav1.children[3].style.color="black";
}
代码:`
文章图片
css代码:
.backgroud{width: 1920px;
height: 1080px;
background-image: url(../个人页面制作/2052882.jpg);
background-repeat: no-repeat;
background-size: 100% 70%;
}.nav{width: 320px;
height: 400px;
position: absolute;
top: 50px;
background-color:rgba(255, 255, 255, 0.2);
;
}
.banner{position: absolute;
top: 130px;
left: 300px;
width: 1000px;
height: 541px;
background-color: ;
}.fengjin{position: absolute;
top: 50px;
right: 0px;
width: 700px;
height: 350px;
background-color: skyblue;
background-repeat: no-repeat;
background-size: 100% 95%;
}.yingliang{position: absolute;
top: 350px;
right: 0px;
width: 700px;
height: 50px;
background-color:rgba(255, 255, 255, 0.2);
;
}.yingliang button{}.nav ul li{width: 300px;
height: 80px;
background-color:rgba(255, 255, 255, 0.2);
;
margin-top: 20px;
color: black;
}.volume{width: 300px;
}.bt{position: absolute;
right: 0px;
height: 400px;
width: 100px;
background-color: purple;
}
js代码:`
var video=document.querySelector('video');
var button1=document.querySelector('.button1');
var button2=document.querySelector('.button2');
var volume=document.querySelector('.volume');
var text1=document.querySelector('.text1');
var text2=document.querySelector('.text2');
var text3=document.querySelector('.text3');
var text4=document.querySelector('.text4');
var nav1=document.querySelector('.nav1');
var button3=document.querySelector('.button3');
var button4=document.querySelector('.button4');
var button5=document.querySelector('.button5');
var button6=document.querySelector('.button6');
var button7=document.querySelector('.button7');
var button8=document.querySelector('.button8');
var image=document.querySelector('.image');
button1.onclick=function(){video.src="https://www.it610.com/个人页面制作/不是花火呀 - love me (片段).mp3";
video.play();
text1.textContent="‖";
nav1.children[0].style.color="blue";
image.src="https://www.it610.com/个人页面制作/2052545.jpg";
text4.textContent="?";
text2.textContent="?";
text3.textContent="?";
nav1.children[1].style.color="black";
nav1.children[2].style.color="black";
nav1.children[3].style.color="black";
}button2.onclick=function(){video.pause();
text1.textContent="?";
nav1.children[0].style.color="black";
nav1.children[1].style.color="blue";
}
button3.onclick=function(){video.src="https://www.it610.com/个人页面制作/1个球 - 以梦为马(片段).mp3";
image.src="https://www.it610.com/个人页面制作/2052461.jpg";
video.play();
text2.textContent="‖";
nav1.children[1].style.color="blue";
text1.textContent="?";
text4.textContent="?";
text3.textContent="?";
nav1.children[0].style.color="black";
nav1.children[2].style.color="black";
nav1.children[3].style.color="black";
}button4.onclick=function(){video.pause();
text2.textContent="?";
nav1.children[1].style.color="black";
}button5.onclick=function(){video.src="https://www.it610.com/个人页面制作/HITA - 赤伶.mp3";
video.play();
text3.textContent="‖";
nav1.children[2].style.color="blue";
image.src="https://www.it610.com/个人页面制作/2052882.jpg";
text1.textContent="?";
text4.textContent="?";
text2.textContent="?";
nav1.children[0].style.color="black";
nav1.children[1].style.color="black";
nav1.children[3].style.color="black";
}button6.onclick=function(){video.pause();
text3.textContent="?";
nav1.children[2].style.color="black";
}button7.onclick=function(){video.src="https://www.it610.com/个人页面制作/薛之谦 - 演员.mp3";
image.src="https://www.it610.com/个人页面制作/2052182.jpg";
video.play();
text4.textContent="‖";
nav1.children[3].style.color="blue";
text1.textContent="?";
text2.textContent="?";
text3.textContent="?";
nav1.children[0].style.color="black";
nav1.children[2].style.color="black";
nav1.children[1].style.color="black";
}button8.onclick=function(){video.pause();
text4.textContent="?";
nav1.children[3].style.color="black";
}volume.onchange=function(){console.log(volume.value);
video.volume=volume.value;
}
效果图:
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 病态与非病态的梦中人情结|病态与非病态的梦中人情结 - 草稿
- 夏天了，来一首入耳即化的音乐吧
- 爱情她死了
- 音乐那么短，但冥想的世界那么玄妙
- 四月是你的谎言（古典音乐）
- 多情总被无情扰（1）
- 2018-01-31|2018-01-31 - 草稿
- 爬取网易云音乐
- 音乐之声(二)
- 2020年10月新番播放时间及版权信息集合