618快到了送上自制前端小项目（html css js）
Posted 言不及行yyds
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了618快到了送上自制前端小项目（html css js）相关的知识，希望对你有一定的参考价值。
目录
前言：这些小项目全都是自创的。
如果需要应用，或则转发的话请与
博主联系，感谢你们的理解，
1.自定义播放器
在页面中放置26个div，每个div中写一个字
母。html结构中引入8个音频结构。给每个
div绑定点击键盘事件。根据键盘的每个
keyCode的不同来动态绑定对应的音频文件。
当按下对应的键盘字母，增添css样式，
音频播放。放开时，存储点击的事件，
将对应的音频存储在一个数组中。
点击按钮，循环播放存储的音频数组
html:
<div id="container">
<div data-key="81" class="key">
<kbd>Q</kbd>
<span class="sound">clap</span>
</div>
<div data-key="87" class="key">
<kbd>W</kbd>
<span class="sound">clap</span>
</div>
<div data-key="69" class="key">
<kbd>E</kbd>
<span class="sound">clap</span>
</div>
<div data-key="82" class="key">
<kbd>R</kbd>
<span class="sound">clap</span>
</div>
<div data-key="84" class="key">
<kbd>T</kbd>
<span class="sound">clap</span>
</div>
<div data-key="89" class="key">
<kbd>Y</kbd>
<span class="sound">clap</span>
</div>
<div data-key="85" class="key">
<kbd>U</kbd>
<span class="sound">clap</span>
</div>
<div data-key="73" class="key">
<kbd>I</kbd>
<span class="sound">clap</span>
</div>
<div data-key="79" class="key">
<kbd>O</kbd>
<span class="sound">clap</span>
</div>
<div data-key="80" class="key">
<kbd>P</kbd>
<span class="sound">clap</span>
</div>
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">clap</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">clap</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">clap</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">clap</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">clap</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">clap</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">clap</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">clap</span>
</div>
<div data-key="90" class="key">
<kbd>Z</kbd>
<span class="sound">clap</span>
</div>
<div data-key="88" class="key">
<kbd>X</kbd>
<span class="sound">clap</span>
</div>
<div data-key="67" class="key">
<kbd>C</kbd>
<span class="sound">clap</span>
</div>
<div data-key="86" class="key">
<kbd>V</kbd>
<span class="sound">clap</span>
</div>
<div data-key="66" class="key">
<kbd>B</kbd>
<span class="sound">clap</span>
</div>
<div data-key="78" class="key">
<kbd>N</kbd>
<span class="sound">clap</span>
</div>
<div data-key="77" class="key">
<kbd>M</kbd>
<span class="sound">clap</span>
</div>
</div>
<div id='btn'>提交数据</div>
<audio data-key="81" src="sounds/clap.wav"></audio>
<audio data-key="87" src="sounds/hihat.wav"></audio>
<audio data-key="69" src="sounds/kick.wav"></audio>
<audio data-key="82" src="sounds/openhat.wav"></audio>
<audio data-key="84" src="sounds/boom.wav"></audio>
<audio data-key="89" src="sounds/ride.wav"></audio>
<audio data-key="85" src="sounds/snare.wav"></audio>
<audio data-key="73" src="sounds/tom.wav"></audio>
<audio data-key="79" src="sounds/tink.wav"></audio>
<audio data-key="80" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="65" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>
<audio data-key="70" src="sounds/clap.wav"></audio>
<audio data-key="90" src="sounds/hihat.wav"></audio>
<audio data-key="88" src="sounds/kick.wav"></audio>
<audio data-key="67" src="sounds/openhat.wav"></audio>
<audio data-key="86" src="sounds/openhat.wav"></audio>
<audio data-key="66" src="sounds/boom.wav"></audio>
<audio data-key="78" src="sounds/ride.wav"></audio>
<audio data-key="77" src="sounds/snare.wav"></audio>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.图片消失
<style>
.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;
</style>
</head>
<body>
<div id="gg" class="ad">
<a href="" > <span id="sj">5</span></a>
</div>
<script>
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);
</script>
</body>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;
</style>
</head>
<body>
<div id="wrap1">
<img src="img/1.png" />
<img src="img/2.png" />
<img src="img/3.png" />
<img src="img/4.png" />
<img src="img/5.png" />
</div>
<script type="text/javascript">
window.onload=function()
var r=320
var imgNodes=document.querySelectorAll("#wrap1>img")
document.onmousemove=function(ev)
ev=ev||event
for(var i=0;i<imgNodes.length;i++)
var a= imgNodes[i].getBoundingClientRect().top+imgNodes[i].offsetHeight/2-ev.clientY
var b= imgNodes[i].getBoundingClientRect().right+ imgNodes[i].offsetWidth/2-ev.clientX
var c=Math.sqrt(a*a+b*b)
if(c>=r)
c=r
imgNodes[i].style.width=128-c*0.2+'px'
</script>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);
</style>html：
<div class="cube">
<div class="box1" data-key="1"><img src="./img/imgs/1.jpg"></div>
<div class="box2" data-key="2"><img src="./img/imgs/2.jpg"></div>
<div class="box3" data-key="3"><img src="./img/imgs/3.jpg"></div>
<div class="box4" data-key="4"><img src="./img/imgs/4.jpg"></div>
<div class="box5" data-key="5"><img src="./img/imgs/5.jpg"></div>
<div class="box6" data-key="6"><img src="./img/imgs/6.jpg"></div>
</div>
<audio src="./img/audio/1.mp3" data-key="1"></audio>
<audio src="./img/audio/2.mp3" data-key="2"></audio>
<audio src="./img/audio/3.mp3" data-key="3"></audio>
<audio src="./img/audio/4.mp3" data-key="4"></audio>
<audio src="./img/audio/5.mp3" data-key="5"></audio>js：
let divs=document.querySelectorAll('.cube>div')
let audios=document.querySelectorAll('audio')
for(let i=0;i<divs.length;i++)
for(let j=0;j<audios.length;j++)
if(divs[i].dataset.key===audios[j].dataset.key)
divs[i].onclick=function()
audios[j].play()
✍在最后，如果觉得博主写的还行
，期待🍟点赞 🍬评论 🍪收藏
开发者涨薪指南
48位大咖的思考法则、工作方式、逻辑体系
以上是关于618快到了送上自制前端小项目（html css js）的主要内容，如果未能解决你的问题，请参考以下文章
MATLAB | 七夕节快到了，还不给朋友安排上这个咕呱小青蛙？