JS控制风车转动：使用按钮实现加速、减速和停止

使用JS控制风车转动：加速、减速和停止

本教程将使用JavaScript和CSS动画实现一个风车，并通过按钮控制风车的转动速度，包括开始、加速、减速和停止。

HTML代码

<div class='windmill'></div>
<button id='startBtn'>开始</button>
<button id='speedUpBtn'>加速</button>
<button id='speedDownBtn'>减速</button>
<button id='stopBtn'>结束</button>

CSS代码

.windmill {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 20px auto;
}

.windmill::before, .windmill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.windmill::before {
  background: #ccc;
  z-index: 1;
  transform-origin: 50% 100%;
  transform: rotate(45deg);
  animation: rotate 4s linear infinite;
}

.windmill::after {
  background: #eee;
  z-index: 2;
  transform-origin: 50% 100%;
  transform: rotate(0deg);
  animation: rotate 4s linear infinite reverse;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

JavaScript代码

const startBtn = document.getElementById('startBtn');
const speedUpBtn = document.getElementById('speedUpBtn');
const speedDownBtn = document.getElementById('speedDownBtn');
const stopBtn = document.getElementById('stopBtn');
const windmill = document.querySelector('.windmill');
let speed = 4;
let isRunning = false;

startBtn.addEventListener('click', () => {
  isRunning = true;
  windmill.style.animation = `rotate ${speed}s linear infinite`;
});

speedUpBtn.addEventListener('click', () => {
  speed -= 0.5;
  if (isRunning) {
    windmill.style.animation = `rotate ${speed}s linear infinite`;
  }
});

speedDownBtn.addEventListener('click', () => {
  speed += 0.5;
  if (isRunning) {
    windmill.style.animation = `rotate ${speed}s linear infinite`;
  }
});

stopBtn.addEventListener('click', () => {
  isRunning = false;
  windmill.style.animation = '';
});

代码解释

首先获取四个按钮和风车元素。
定义两个变量：speed表示风车转动的速度，初始值为4秒；isRunning表示风车是否正在转动，初始值为false。
监听开始按钮的点击事件，将isRunning设为true，给风车添加动画并指定动画时间为speed秒。
监听加速按钮的点击事件，将speed减去0.5秒，如果风车正在转动（即isRunning为true），则重新给风车添加动画并指定动画时间为新的speed秒。
监听减速按钮的点击事件，将speed加上0.5秒，同样需要重新给风车添加动画并指定动画时间为新的speed秒。
监听结束按钮的点击事件，将isRunning设为false，同时清空风车的动画样式（即停止转动）。