目录
.自定义播放器
.图片自动消失
✨.小轮播图
.旋转音乐盒
前言：这些小项目全都是自创的。
如果需要应用，或则转发的话请与
博主联系，感谢你们的理解，
1.自定义播放器
在页面中放置26个div，每个div中写一个字
母。html结构中引入8个音频结构。给每个
div绑定点击键盘事件。根据键盘的每个
keyCode的不同来动态绑定对应的音频文件。
当按下对应的键盘字母，增添css样式，
音频播放。放开时，存储点击的事件，
将对应的音频存储在一个数组中。
点击按钮，循环播放存储的音频数组
html:
Q
clap
W
clap
E
clap
R
clap
T
clap
Y
clap
U
clap
I
clap
O
clap
P
clap
A
clap
S
clap
D
clap
F
clap
G
clap
H
clap
J
clap
K
clap
L
clap
Z
clap
X
clap
C
clap
V
clap
B
clap
N
clap
M
clap
提交数据
css:
*{
margin:0;
padding:0;
}
.top{
width:100%;
height:100px;
}
.top i{
font-size: 24px;
}
.top-left{
width:20%;
height:100%;
float:left;
text-align: center;
line-height: 100px;
position: relative;
}
.top-left .cls5{
position: absolute;
left:40px;
}
.top-middle{
width:50%;
height:100%;
float:left;
text-align: center;
line-height: 100px;
position:relative;
}
.top-middle .cls1{
position: absolute;
left:30px;
}
.top-middle .cls2{
position: absolute;
left:60px;
}
.top-middle .cls3{
position: absolute;
right:500px;
}
.top-middle .container{
width:300px;
height:40px;
border:1px solid whitesmoke;
border-radius: 10px;
position:absolute;
left:100px;
top:30px;
text-align: center;
line-height: 40px;
}
.top-middle .container .cls4{
position: absolute;
left:20px;
}
.top-right{
width:30%;
height:100%;
float:right;
}
.top-right ul{
list-style: none;
text-align: center;
height:100px;
line-height:100px ;
}
.top-right ul li{
float:right;
margin:0 20px 0 20px;
}
.bottom{
width:100%;
height:100px;
margin-top:710px;
}
.bottom i{
font-size: 24px;
}
.bottom-left{
width:20%;
height:100px;
line-height: 100px;
float:left;
text-align: center;
}
.bottom-left ul{
list-style: none;
}
.bottom-left ul li{
float:left;
margin:0 30px 0 30px;
}
.bottom-mid{
width:50%;
height:100px;
line-height: 100px;
float:left;
}
.bottom-mid ul{
list-style: none;
}
.bottom-mid ul li{
float:left;
margin: auto 50px;
}
.bot-mid-top{
width:100%;
height:60px;
text-align: center;
line-height: 50px;
}
.bot-mid-top .clf1{
margin-left:250px;
}
.bot-mid-bot{
width:100%;
height:40px;
line-height: 40px;
}
.bot-mid-bot .item{
width:80%;
border:1px solid #333;
border-radius: 3px;
height:9px;
margin-top:12px;
margin-left:100px;
}
.bottom-right{
width:30%;
height:100px;
line-height: 100px;
float:left;
}
.bottom-right ul{
list-style: none;
}
.bottom-right ul li{
float:left;
margin:0 30px 0 30px;
}
.bottom-right ul .clf2{
margin-left:200px;
}
js:
let audioArr = []
function removeClass(e) {
let key = document.querySelector(`div[data-key="${e.keyCode}`)
let audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
key.classList.remove('playing')
audioArr.push(audio)
}
function playAudio(e) {
let key = document.querySelector(`div[data-key="${e.keyCode}`)
let audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
key.classList.add('playing')
//audio.currentTime = 0; // 每次播放之后都使音频播放进度归零
if (!audio) return;
audio.play()
}
window.addEventListener('keydown', e => playAudio(e))
window.addEventListener('keyup', e => removeClass(e))
const btn = document.getElementById('btn')
function Play() {
const self=this
const item1=setInterval(function(){
self.i++
console.log(self.i)
audioArr[self.i-2].play()
if(self.i>audioArr.length){
clearInterval(item1)
}
}, 200);
}
let obj={
i:1
}
function bind(){
Play.call(obj)
}
btn.addEventListener("click",bind)
2.图片自动消失
一张图片，在其右上角放置一个div
，分别得到那个元素，在div中插入数字
开启一个定时器，每隔一段时间减一。
直到为0.图片消失
5
yy3.小轮播图
放置三张图片，移动到那个图片，
改变他的偏移量。
*{
padding:0;
margin:0;
}
body,html{
width:100%;
overflow:hidden;
}
#wrap1{
width:100%;
position:absolute;
bottom:0;
left:0;
text-align: center;
}
#wrap1>img{
width:64px;
}
4.旋转音乐盒
旋转音乐盒
放置六张图片，将他们绝对定位。
根据所学css来对每一张图片进行定位
然后就是当点击哪一个图片时，播放
对应的音频音乐。
css：
*{
padding:0;
margin:0;
}
.cube{
width:200px;
height:200px;
position: relative;
margin:200px auto;
//使效果呈现3d效果
transform-style: preserve-3d;
animation: rotate 30s infinite linear;
}
@keyframes rotate{
from{
transform:rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
html{
//屏幕与我们的视距
perspective: 10000px;
}
.cube>div{
width:200px;
height:200px;
position:absolute;
opacity: 0.7;
}
img{
width:200px;
height:200px;
}
.box1{
transform: rotateX(90deg) translateZ(100px);
}
.box2{
transform: rotateX(-90deg) translateZ(100px);
}
.box3{
transform: rotateY(0deg) translateZ(100px);
}
.box4{
transform: rotateY(180deg) translateZ(100px);
}
.box5 {
transform: rotateY(90deg) translateZ(100px);
}
.box6 {
transform: rotateY(-90deg) translateZ(100px);
}
.change{
transform: translateZ(50px);
}
html：
js：
let divs=document.querySelectorAll('.cube>div')
let audios=document.querySelectorAll('audio')
for(let i=0;i
✍在最后，如果觉得博主写的还行
，期待点赞 评论 收藏
