自制前端小项目（html css js）

最新推荐文章于 2024-10-07 14:04:42 发布
IT-北溟有鱼
最新推荐文章于 2024-10-07 14:04:42 发布
阅读量679
点赞数
分类专栏： web课程设计文章标签： javascript 前端
本文链接：https://blog.csdn.net/qq__3200628753/article/details/126178034
版权
本文分享了四个原创的前端小项目：自定义播放器，图片自动消失，小轮播图和旋转音乐盒。每个项目都详细介绍了实现思路和代码结构，包括HTML、CSS和JavaScript的使用。通过这些项目，可以锻炼前端开发技能并理解事件绑定、音频控制、CSS动画等概念。
摘要由CSDN通过智能技术生成
前言：这些小项目全都是自创的。

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

博主联系，感谢你们的理解，
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