目录

.自定义播放器

.图片自动消失

✨.小轮播图

.旋转音乐盒

 前言：这些小项目全都是自创的。

如果需要应用，或则转发的话请与

博主联系，感谢你们的理解，

1.自定义播放器

在页面中放置26个div，每个div中写一个字

母。html结构中引入8个音频结构。给每个

div绑定点击键盘事件。根据键盘的每个

keyCode的不同来动态绑定对应的音频文件。

当按下对应的键盘字母，增添css样式，

音频播放。放开时，存储点击的事件，

将对应的音频存储在一个数组中。

点击按钮，循环播放存储的音频数组

html:

 
 
Qclap
Wclap
Eclap
Rclap
Tclap
Yclap
Uclap
Iclap
Oclap
Pclap
Aclap
Sclap
Dclap
Fclap
Gclap
Hclap
Jclap
Kclap
Lclap
Zclap
Xclap
Cclap
Vclap
Bclap
Nclap
Mclap
提交数据

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) {letkey = 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) {letkey = 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=thisconst 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.图片消失

.ad{width:400px;height:400px;background-image: url(img/1.jpg);position:relative;margin:200px auto;}#sj{display:block;width:40px;height:40px;line-height:30px;border-radius:50%;border:1px solid red;position:absolute;top:20px;right:20px;text-decoration: none;text-align: center;line-height: 40px;font-size: 20px;}
 5
var gg=document.getElementById("gg");var sj=document.getElementById("sj")var time=setInterval(function(){sj.innerHTML-=1;if(sj.innerHTML==0){gg.style.display="none";clearInterval(time);}},1000);

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;}
window.onload=function(){var r=320var imgNodes=document.querySelectorAll("#wrap1>img")document.onmousemove=function(ev){ev=ev||eventfor(var i=0;i 
旋转音乐盒