📌  相关文章
📜  使用 HTML、CSS 和 JavaScript 创建音乐网站模板

📅  最后修改于: 2021-09-01 02:06:56             🧑  作者: Mango

音乐网站基本上是一个可以播放/暂停音乐的网页。它还有其他选项，如主页部分、音乐部分、关于部分、联系部分等。在这个项目中，我们将创建一个使用 HTML、CSS 和 JavaScript 播放/暂停音乐的网站。我们将使用 HTML 提供基本布局，并使用 CSS，通过提供搁浅和播放暂停按钮图像来美化我们的设计。我们将使用基本的 JavaScript 功能，如if-else和document.getElementById来播放和暂停我们的音乐。

方法：

  • 我们将创建基本布局，即在一个 div 标签内有两个 div (左和右)。在左侧 div 中，我们将编写一些文本，在右侧 div 中，我们将放置播放或暂停图像。我们还将创建一个基本的导航栏并在右侧浮动。
  • 在 CSS 的帮助下，我们将通过提供背景图像、填充、边距等来美化我们的整体结构。
  • 我们将使用基本的 JavaScript 函数，如 onclick()、play()、pause() 和 getElementById() 来获取音乐的当前状态并进行相应的更改。
  • 当用户播放音乐时，我们将显示播放图像或图标，当用户按下暂停时，将显示暂停图像或图标。这是使用简单的 if-else 语句完成的。

例子：

HTML


  

    

  

    

        
    
            
  • CONTACT
    • 
            
  • ABOUT
    • 
            
  • ARTISTS
    • 
            
  • MUSIC
    • 
            
  • HOME
    • 
        

    

  
    

        

            
MY 
 SOUNDS

        

  
        

            
Click Here To Listen

            
        

    

  
    
  
    

  

输出：