初次接触JavaScript，是如何写出一个网页打鼓效果的？

2023-10-29 15:06:30

前言

作为一个刚接触JavaScript的新手，我一直在寻找有趣且富有挑战性的项目来磨练自己的技能。模拟打鼓练习似乎是一个很好的起点，因为它既可以让我学习JavaScript的基本知识，又可以让我发挥自己的创造力。

页面结构

首先，我需要设计一个简单的网页结构来容纳我的模拟打鼓功能。我决定使用一个包含一个标题、一个按钮和一个打鼓区的主体。按钮用来启动或停止打鼓功能，而打鼓区则用来显示模拟的鼓。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>模拟打鼓</h1>
  <button id="start-stop">开始/停止</button>
  <div id="drum-area"></div>

  <script src="script.js"></script>
</body>
</html>

功能实现

接下来，我需要实现模拟打鼓的功能。我决定使用JavaScript的setInterval()函数来创建循环，并使用createElement()函数来创建模拟的鼓。

// 获取按钮和打鼓区元素
const startStopButton = document.getElementById('start-stop');
const drumArea = document.getElementById('drum-area');

// 创建一个循环来模拟打鼓
let intervalId;
function startDrumming() {
  intervalId = setInterval(() => {
    // 创建一个模拟的鼓
    const drum = document.createElement('div');
    drum.classList.add('drum');

    // 将模拟的鼓添加到打鼓区
    drumArea.appendChild(drum);

    // 设置模拟的鼓的动画效果
    drum.animate([
      { transform: 'scale(0)' },
      { transform: 'scale(1)' }
    ], {
      duration: 200,
      iterations: Infinity
    });
  }, 500);
}

// 当按钮被点击时，启动或停止打鼓功能
startStopButton.addEventListener('click', () => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  } else {
    startDrumming();
  }
});

总结

通过这个练习，我不仅学习了JavaScript的基本知识，还了解了如何使用JavaScript来创建交互式网页。模拟打鼓功能虽然很简单，但它让我对JavaScript的潜力有了更深入的认识。

我希望这篇文章对其他JavaScript新手有所帮助。如果你有任何问题或建议，请随时在评论区留言。

代码

完整的代码如下：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>模拟打鼓</h1>
  <button id="start-stop">开始/停止</button>
  <div id="drum-area"></div>

  <script src="script.js"></script>
</body>
</html>

// 获取按钮和打鼓区元素
const startStopButton = document.getElementById('start-stop');
const drumArea = document.getElementById('drum-area');

// 创建一个循环来模拟打鼓
let intervalId;
function startDrumming() {
  intervalId = setInterval(() => {
    // 创建一个模拟的鼓
    const drum = document.createElement('div');
    drum.classList.add('drum');

    // 将模拟的鼓添加到打鼓区
    drumArea.appendChild(drum);

    // 设置模拟的鼓的动画效果
    drum.animate([
      { transform: 'scale(0)' },
      { transform: 'scale(1)' }
    ], {
      duration: 200,
      iterations: Infinity
    });
  }, 500);
}

// 当按钮被点击时，启动或停止打鼓功能
startStopButton.addEventListener('click', () => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  } else {
    startDrumming();
  }
});