做一个敲木鱼的网页

日期: 2026-09-09 10:06:29

标签: 文化

以下是一个简单的敲木鱼的网页示例：

<!DOCTYPE html>
<html>
<head>
  <title>敲木鱼</title>
  <style>
    .woodblock {
      width: 100px;
      height: 100px;
      background-color: #888;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: white;
    }
  </style>
</head>
<body>
  <div class="woodblock" onclick="playSound()">敲击木鱼</div>
  
  <script>
    function playSound() {
      var audio = new Audio('sound/woodblock_sound.mp3');
      audio.play();
    }
  </script>
</body>
</html>

这个网页包含一个木鱼形状的div元素，当点击木鱼时，会播放一个木鱼声音。你可以将一个名为 woodblock_sound.mp3 的音频文件放在与HTML文件相同的目录下，并将其路径更新到 Audio 对象中

原文地址: https://www.cveoy.top/t/topic/h8fB 著作权归作者所有。请勿转载和采集!