• 618快到了送上自制前端小项目（html css js）

    目录

    🚩.自定义播放器

    🏠.图片自动消失

    ✨.小轮播图

    🎃.旋转音乐盒

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

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

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

     

    1.自定义播放器

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

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

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

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

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

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

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

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

    html:

    1.  <div id="container">   
    2.         <div data-key="81" class="key">
    3.             <kbd>Q</kbd>
    4.             <span class="sound">clap</span>
    5.         </div>
    6.         <div data-key="87" class="key">
    7.             <kbd>W</kbd>
    8.             <span class="sound">clap</span>
    9.         </div>
    10.         <div data-key="69" class="key">
    11.             <kbd>E</kbd>
    12.             <span class="sound">clap</span>
    13.         </div>
    14.         <div data-key="82" class="key">
    15.             <kbd>R</kbd>
    16.             <span class="sound">clap</span>
    17.         </div>
    18.         <div data-key="84" class="key">
    19.             <kbd>T</kbd>
    20.             <span class="sound">clap</span>
    21.         </div>
    22.         <div data-key="89" class="key">
    23.             <kbd>Y</kbd>
    24.             <span class="sound">clap</span>
    25.         </div>
    26.         <div data-key="85" class="key">
    27.             <kbd>U</kbd>
    28.             <span class="sound">clap</span>
    29.         </div>
    30.         <div data-key="73" class="key">
    31.             <kbd>I</kbd>
    32.             <span class="sound">clap</span>
    33.         </div>
    34.         <div data-key="79" class="key">
    35.             <kbd>O</kbd>
    36.             <span class="sound">clap</span>
    37.         </div>
    38.         <div data-key="80" class="key">
    39.             <kbd>P</kbd>
    40.             <span class="sound">clap</span>
    41.         </div>
    42.         <div data-key="65" class="key">
    43.             <kbd>A</kbd>
    44.             <span class="sound">clap</span>
    45.         </div>
    46.         <div data-key="83" class="key">
    47.             <kbd>S</kbd>
    48.             <span class="sound">clap</span>
    49.         </div>
    50.         <div data-key="68" class="key">
    51.             <kbd>D</kbd>
    52.             <span class="sound">clap</span>
    53.         </div>
    54.         <div data-key="70" class="key">
    55.             <kbd>F</kbd>
    56.             <span class="sound">clap</span>
    57.         </div>
    58.         <div data-key="71" class="key">
    59.             <kbd>G</kbd>
    60.             <span class="sound">clap</span>
    61.         </div>
    62.         <div data-key="72" class="key">
    63.             <kbd>H</kbd>
    64.             <span class="sound">clap</span>
    65.         </div>
    66.         <div data-key="74" class="key">
    67.             <kbd>J</kbd>
    68.             <span class="sound">clap</span>
    69.         </div>
    70.         <div data-key="75" class="key">
    71.             <kbd>K</kbd>
    72.             <span class="sound">clap</span>
    73.         </div>
    74.         <div data-key="76" class="key">
    75.             <kbd>L</kbd>
    76.             <span class="sound">clap</span>
    77.         </div>
    78.         <div data-key="90" class="key">
    79.             <kbd>Z</kbd>
    80.             <span class="sound">clap</span>
    81.         </div>
    82.         <div data-key="88" class="key">
    83.             <kbd>X</kbd>
    84.             <span class="sound">clap</span>
    85.         </div>
    86.         <div data-key="67" class="key">
    87.             <kbd>C</kbd>
    88.             <span class="sound">clap</span>
    89.         </div>
    90.         <div data-key="86" class="key">
    91.             <kbd>V</kbd>
    92.             <span class="sound">clap</span>
    93.         </div>
    94.         <div data-key="66" class="key">
    95.             <kbd>B</kbd>
    96.             <span class="sound">clap</span>
    97.         </div>
    98.         <div data-key="78" class="key">
    99.             <kbd>N</kbd>
    100.             <span class="sound">clap</span>
    101.         </div>
    102.         <div data-key="77" class="key">
    103.             <kbd>M</kbd>
    104.             <span class="sound">clap</span>
    105.         </div>
    106.     </div>
    107.     <div id='btn'>提交数据</div>
    108.     <audio data-key="81" src="sounds/clap.wav"></audio>
    109.   <audio data-key="87" src="sounds/hihat.wav"></audio>
    110.   <audio data-key="69" src="sounds/kick.wav"></audio>
    111.   <audio data-key="82" src="sounds/openhat.wav"></audio>
    112.   <audio data-key="84" src="sounds/boom.wav"></audio>
    113.   <audio data-key="89" src="sounds/ride.wav"></audio>
    114.   <audio data-key="85" src="sounds/snare.wav"></audio>
    115.   <audio data-key="73" src="sounds/tom.wav"></audio>
    116.   <audio data-key="79" src="sounds/tink.wav"></audio>
    117.   <audio data-key="80" src="sounds/clap.wav"></audio>
    118.   <audio data-key="83" src="sounds/hihat.wav"></audio>
    119.   <audio data-key="68" src="sounds/kick.wav"></audio>
    120.   <audio data-key="65" src="sounds/openhat.wav"></audio>
    121.   <audio data-key="71" src="sounds/boom.wav"></audio>
    122.   <audio data-key="72" src="sounds/ride.wav"></audio>
    123.   <audio data-key="74" src="sounds/snare.wav"></audio>
    124.   <audio data-key="75" src="sounds/tom.wav"></audio>
    125.   <audio data-key="76" src="sounds/tink.wav"></audio>
    126.   <audio data-key="70" src="sounds/clap.wav"></audio>
    127.   <audio data-key="90" src="sounds/hihat.wav"></audio>
    128.   <audio data-key="88" src="sounds/kick.wav"></audio>
    129.   <audio data-key="67" src="sounds/openhat.wav"></audio>
    130.   <audio data-key="86" src="sounds/openhat.wav"></audio>
    131.   <audio data-key="66" src="sounds/boom.wav"></audio>
    132.   <audio data-key="78" src="sounds/ride.wav"></audio>
    133.   <audio data-key="77" src="sounds/snare.wav"></audio>

    css:

    1. *{
    2.     margin:0;
    3.     padding:0;
    4. }
    5. .top{
    6.     width:100%;
    7.     height:100px;
    8. }
    9. .top i{
    10.     font-size: 24px;
    11. }
    12. .top-left{
    13.     width:20%;
    14.     height:100%;
    15.     float:left;
    16.     text-align: center;
    17.     line-height: 100px;
    18.     position: relative;
    19. }
    20. .top-left .cls5{
    21.     position: absolute;
    22.     left:40px;
    23. }
    24. .top-middle{
    25.     width:50%;
    26.     height:100%;
    27.     float:left;
    28.     text-align: center;
    29.     line-height: 100px;
    30.     position:relative;
    31. }
    32. .top-middle .cls1{
    33.     position: absolute;
    34.     left:30px;
    35. }
    36. .top-middle .cls2{
    37.     position: absolute;
    38.     left:60px;
    39. }
    40. .top-middle .cls3{
    41.     position: absolute;
    42.     right:500px;
    43. }
    44. .top-middle .container{
    45.     width:300px;
    46.     height:40px;
    47.     border:1px solid whitesmoke;
    48.     border-radius: 10px;
    49.    position:absolute;
    50.    left:100px;
    51.    top:30px;
    52.    text-align: center;
    53.    line-height: 40px;
    54. }
    55. .top-middle .container .cls4{
    56.     position: absolute;
    57.     left:20px;
    58. }
    59. .top-right{
    60.     width:30%;
    61.     height:100%;
    62.     float:right;
    63. }
    64. .top-right ul{
    65.     list-style: none;
    66.     text-align: center;
    67.     height:100px;
    68.     line-height:100px ;
    69. }
    70. .top-right ul li{
    71.     float:right;
    72.     margin:0 20px 0 20px;
    73. }
    74.  
    75.  
    76.  
    77. .bottom{
    78.     width:100%;
    79.     height:100px;
    80.     margin-top:710px;
    81. }
    82. .bottom i{
    83.     font-size: 24px;
    84. }
    85. .bottom-left{
    86.     width:20%;
    87.     height:100px;
    88.     line-height: 100px;
    89.     float:left;
    90.     text-align: center;
    91. }
    92. .bottom-left ul{
    93.     list-style: none;
    94. }
    95. .bottom-left ul li{
    96.     float:left;
    97.     margin:0 30px 0 30px;
    98. }
    99.  
    100. .bottom-mid{
    101.     width:50%;
    102.     height:100px;
    103.     line-height: 100px;
    104.     float:left;
    105. }
    106. .bottom-mid ul{
    107.     list-style: none;
    108. }
    109. .bottom-mid ul li{
    110.     float:left;
    111.     margin: auto 50px;
    112. }
    113. .bot-mid-top{
    114.     width:100%;
    115.     height:60px;
    116.     text-align: center;
    117.     line-height: 50px;
    118. }
    119. .bot-mid-top .clf1{
    120.     margin-left:250px;
    121. }
    122. .bot-mid-bot{
    123.     width:100%;
    124.     height:40px;
    125.     line-height: 40px;
    126. }
    127. .bot-mid-bot .item{
    128.     width:80%;
    129.     border:1px solid #333;
    130.     border-radius: 3px;
    131.     height:9px;
    132.     
    133.     margin-top:12px;
    134.     margin-left:100px;
    135. }
    136. .bottom-right{
    137.     width:30%;
    138.     height:100px;
    139.     line-height: 100px;
    140.     float:left;
    141. }
    142. .bottom-right ul{
    143.     list-style: none;
    144. }
    145. .bottom-right ul li{
    146.     float:left;
    147.     margin:0 30px 0 30px;
    148. }
    149. .bottom-right ul .clf2{
    150.     margin-left:200px;
    151. }

    js:

    1. let audioArr = []
    2.  
    3.  
    4. function removeClass(e) {
    5.     let  key = document.querySelector(`div[data-key="${e.keyCode}`)
    6.     let audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
    7.     key.classList.remove('playing')
    8.     audioArr.push(audio)
    9. }
    10.  
    11. function playAudio(e) {
    12.     let  key = document.querySelector(`div[data-key="${e.keyCode}`)
    13.    let audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
    14.     key.classList.add('playing')
    15.     //audio.currentTime = 0; // 每次播放之后都使音频播放进度归零
    16.     if (!audio) return;
    17.     audio.play()
    18. }
    19.  
    20. window.addEventListener('keydown', e => playAudio(e))
    21. window.addEventListener('keyup', e => removeClass(e))
    22.  
    23. const btn = document.getElementById('btn')
    24.  
    25.  function Play() {
    26.   const self=this
    27.   const item1=setInterval(function(){
    28.     self.i++
    29.     console.log(self.i)
    30.     audioArr[self.i-2].play()
    31.     if(self.i>audioArr.length){
    32.       clearInterval(item1)
    33.     }
    34.   }, 200);
    35. }
    36.  
    37. let obj={
    38.    i:1
    39. }
    40.  
    41. function bind(){
    42.   Play.call(obj)
    43. }
    44. btn.addEventListener("click",bind)

    2.图片自动消失

    一张图片，在其右上角放置一个div

    ，分别得到那个元素，在div中插入数字

    开启一个定时器，每隔一段时间减一。

    直到为0.图片消失

    1. <style>
    2. .ad{
    3. 	width:400px;
    4. 	height:400px;
    5. 	background-image: url(img/1.jpg);
    6. 	position:relative;
    7. 	margin:200px auto;
    8. }
    9. #sj{
    10. 	display:block;
    11. 	width:40px;
    12. 	height:40px;
    13. 	line-height:30px;
    14. 	border-radius:50%;
    15. 	border:1px solid red;
    16. 	position:absolute;
    17. 	top:20px;
    18. 	right:20px;
    19. 	text-decoration: none;
    20. 	text-align: center;
    21. 	line-height: 40px;
    22. 	font-size: 20px;
    23. }
    24. </style>
    25. </head>
    26. <body>
    27. 	<div id="gg" class="ad">
    28. 		<a href="" > <span id="sj">5</span></a>
    29. 	</div>
    30. <script>
    31. var gg=document.getElementById("gg");
    32. var sj=document.getElementById("sj")
    33. var time=setInterval(function(){
    34. 	sj.innerHTML-=1;
    35. 	if(sj.innerHTML==0){
    36. 		gg.style.display="none";
    37. 		clearInterval(time);
    38. 	}
    39. },1000);
    40. </script>
    41. </body>

    yy3.小轮播图

    放置三张图片，移动到那个图片，

    改变他的偏移量。

    1. *{
    2. 	padding:0;
    3. 	margin:0;
    4. 	}
    5. body,html{
    6. 	width:100%;
    7. 	 overflow:hidden;
    8. 	}
    9. #wrap1{
    10. 	width:100%;
    11. 	position:absolute;
    12. 	bottom:0;
    13. 	left:0;
    14. 	text-align: center;
    15. 	}
    16. #wrap1>img{
    17. 	width:64px;
    18. 	}
    19. </style>
    20. </head>
    21. <body>
    22. 	<div id="wrap1">
    23. 		<img src="img/1.png" />
    24. 		<img src="img/2.png" />
    25. 		<img src="img/3.png" />
    26. 		<img src="img/4.png" />
    27. 		<img src="img/5.png" />
    28. 	</div>
    29. <script type="text/javascript">
    30. 	window.onload=function(){
    31. 		var r=320
    32. 		var imgNodes=document.querySelectorAll("#wrap1>img")
    33. 		document.onmousemove=function(ev){
    34. 		ev=ev||event
    35. 		for(var i=0;i<imgNodes.length;i++){
    36. var a= imgNodes[i].getBoundingClientRect().top+imgNodes[i].offsetHeight/2-ev.clientY
    37. var b= imgNodes[i].getBoundingClientRect().right+ imgNodes[i].offsetWidth/2-ev.clientX
    38. 	var c=Math.sqrt(a*a+b*b)
    39. 			if(c>=r){
    40. 					c=r
    41. 					}
    42. 				 imgNodes[i].style.width=128-c*0.2+'px'
    43. 					}
    44. 				}
    45. 			}
    46. </script>

    4.旋转音乐盒

    旋转音乐盒

    放置六张图片，将他们绝对定位。

    根据所学css来对每一张图片进行定位

    然后就是当点击哪一个图片时，播放

    对应的音频音乐。

    css：

    1. *{
    2. 	padding:0;
    3. 	margin:0;
    4. }
    5. .cube{
    6. 	width:200px;
    7. 	height:200px;
    8. 	position: relative;	
    9. 	margin:200px auto;
    10.    //使效果呈现3d效果		
    11. 	transform-style: preserve-3d;
    12. 	animation: rotate 30s infinite linear;
    13. 	}
    14. @keyframes rotate{
    15. 	from{
    16.        transform:rotateX(0deg) rotateY(0deg);
    17.         }
    18.     to{
    19.        transform: rotateX(360deg) rotateY(360deg);
    20.         }
    21. }
    22. html{
    23.    //屏幕与我们的视距
    24. 	perspective: 10000px;
    25. 	}
    26. .cube>div{
    27. 	width:200px;
    28. 	height:200px;
    29. 	position:absolute;
    30. 	opacity: 0.7;
    31. 	}
    32. img{
    33. 	width:200px;
    34. 	height:200px;
    35. 	}
    36. .box1{
    37. 	transform: rotateX(90deg) translateZ(100px);
    38. 	}
    39. .box2{
    40. 	transform: rotateX(-90deg) translateZ(100px);
    41. 	}
    42. .box3{
    43. 	transform:  rotateY(0deg) translateZ(100px);
    44. 	}
    45. .box4{
    46. 	transform:  rotateY(180deg) translateZ(100px);
    47. 	}
    48. .box5 {
    49. 	transform: rotateY(90deg) translateZ(100px);
    50. 	}
    51. .box6  {
    52. 	transform: rotateY(-90deg) translateZ(100px);
    53. 	}
    54. .change{
    55. 	transform:  translateZ(50px);
    56. }
    57. </style>

    html：

    1. <div class="cube">
    2. 	<div class="box1" data-key="1"><img src="./img/imgs/1.jpg"></div>
    3. 	<div class="box2" data-key="2"><img src="./img/imgs/2.jpg"></div>
    4. 	<div class="box3" data-key="3"><img src="./img/imgs/3.jpg"></div>
    5. 	<div class="box4" data-key="4"><img src="./img/imgs/4.jpg"></div>
    6. 	<div class="box5" data-key="5"><img src="./img/imgs/5.jpg"></div>
    7. 	<div class="box6" data-key="6"><img src="./img/imgs/6.jpg"></div>
    8. </div>
    9. <audio src="./img/audio/1.mp3" data-key="1"></audio>
    10. <audio src="./img/audio/2.mp3" data-key="2"></audio>
    11. <audio src="./img/audio/3.mp3" data-key="3"></audio>
    12. <audio src="./img/audio/4.mp3" data-key="4"></audio>
    13. <audio src="./img/audio/5.mp3" data-key="5"></audio>

    js：

    1. let divs=document.querySelectorAll('.cube>div')
    2. let audios=document.querySelectorAll('audio')
    3.     for(let i=0;i<divs.length;i++){
    4. 		for(let j=0;j<audios.length;j++){
    5. 			if(divs[i].dataset.key===audios[j].dataset.key){
    6. 				divs[i].onclick=function(){
    7. 					audios[j].play()
    8. 				}
    9. 			}
    10. 		}
    11. 	}

    ✍在最后，如果觉得博主写的还行

    ，期待🍟点赞  🍬评论 🍪收藏

  • 相关阅读:
    Solend创始人复盘ezETH脱锚：如何应对LST风险？
    c刷题(四）
    Pytorch的学习
    【Typescript】面向对象（上篇），包含类，构造函数，继承，super，抽象类
    《KAN》论文笔记
    【面试经典150 | 数组】跳跃游戏
    代码随想录算法训练营二十四期第十七天|LeetCode110. 平衡二叉树、LeetCode257. 二叉树的所有路径、LeetCode404. 左叶子之和
    开源啦！JFinal论坛网，非常适合学习
    C++使用TinyXml(开源库)读取*.XMl文件
    2023双十一爆冷收场，订单后暗藏这些电商痛点问题需要注意
  • 原文地址：https://blog.csdn.net/m0_51311990/article/details/125211804