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

HTML代码：

<div class="windmill-container">
  <div class="windmill">
    <div class="blade blade-1"></div>
    <div class="blade blade-2"></div>
    <div class="blade blade-3"></div>
    <div class="blade blade-4"></div>
    <div class="center"></div>
  </div>
</div>
<button id="start-btn">开始</button>
<button id="accelerate-btn">加速</button>
<button id="decelerate-btn">减速</button>
<button id="stop-btn">结束</button>

CSS代码：

.windmill-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.windmill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  animation-name: rotate;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.blade {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 80px;
  background-color: #fff;
  transform-origin: bottom center;
}

.blade-1 {
  transform: rotate(0deg);
}

.blade-2 {
  transform: rotate(90deg);
}

.blade-3 {
  transform: rotate(180deg);
}

.blade-4 {
  transform: rotate(270deg);
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

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

.windmill.stop {
  animation-play-state: paused;
}

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

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

JS代码：

var windmill = document.querySelector('.windmill');

document.getElementById('start-btn').addEventListener('click', function() {
  windmill.classList.remove('stop');
});

document.getElementById('stop-btn').addEventListener('click', function() {
  windmill.classList.add('stop');
});

document.getElementById('accelerate-btn').addEventListener('click', function() {
  windmill.classList.remove('slow');
  windmill.classList.add('fast');
});

document.getElementById('decelerate-btn').addEventListener('click', function() {
  windmill.classList.remove('fast');
  windmill.classList.add('slow');
});

首先，通过 document.querySelector('.windmill') 获取到风车元素，然后分别给四个按钮添加点击事件监听器，根据按钮的不同功能，通过添加和移除不同的类名来控制风车的动画。例如，点击开始按钮时，通过 windmill.classList.remove('stop') 移除 stop 类名来启动动画；点击加速按钮时，通过 windmill.classList.add('fast') 添加 fast 类名来加快动画速度。最后，根据添加和移除的类名，在 CSS 中定义对应的动画效果