使用js按钮控制风车转动结合css动画的风车作业页面打开时风车不转动点击【开始】按钮时风车开始转动点击【加速】按钮后风车转动越来越快点击【减速】按钮后风车转动越来越慢点击【结束】按钮后风尘停止转动

HTML代码：

<div id="windmill"></div>
<div id="buttons">
  <button id="start">开始</button>
  <button id="accelerate">加速</button>
  <button id="decelerate">减速</button>
  <button id="stop">结束</button>
</div>

CSS代码：

#windmill {
  width: 200px;
  height: 200px;
  background-color: #f9f9f9;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
  animation: rotate 2s linear infinite;
}

#windmill:before,
#windmill:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 80px;
  background-color: #555;
  transform-origin: top center;
  border-radius: 5px;
}

#windmill:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#windmill:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotate-slow {
  animation-duration: 4s;
}

.rotate-fast {
  animation-duration: 1s;
}

JavaScript代码：

var windmill = document.getElementById("windmill");
var startBtn = document.getElementById("start");
var accelerateBtn = document.getElementById("accelerate");
var decelerateBtn = document.getElementById("decelerate");
var stopBtn = document.getElementById("stop");
var speed = 2;

startBtn.onclick = function() {
  windmill.style.animationPlayState = "running";
}

accelerateBtn.onclick = function() {
  speed += 1;
  windmill.style.animationDuration = 2 / speed + "s";
}

decelerateBtn.onclick = function() {
  if (speed > 1) {
    speed -= 1;
    windmill.style.animationDuration = 2 / speed + "s";
  }
}

stopBtn.onclick = function() {
  windmill.style.animationPlayState = "paused";
}

解释说明：

1. 首先获取页面上的元素，包括风车、四个按钮。
2. 给开始按钮绑定点击事件，当点击开始按钮时，将风车的动画播放状态设置为“running”，即开始转动。
3. 给加速按钮绑定点击事件，每点击一次，将速度加1，并根据新的速度重新计算动画的持续时间，使风车转动越来越快。
4. 给减速按钮绑定点击事件，每点击一次，将速度减1，并根据新的速度重新计算动画的持续时间，使风车转动越来越慢。需要注意的是，速度不能小于1，否则动画会出错。
5. 给结束按钮绑定点击事件，当点击结束按钮时，将风车的动画播放状态设置为“paused”，即停止转动