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

HTML代码：

<div class="windmill">
  <img src="windmill.png" alt="风车">
</div>

<button id="startBtn">开始</button>
<button id="speedUpBtn">加速</button>
<button id="speedDownBtn">减速</button>
<button id="stopBtn">结束</button>

CSS代码：

.windmill {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 50px auto;
  animation: none;
}

.windmill img {
  width: 100%;
  height: 100%;
}

.windmill.rotate {
  animation: rotate 5s linear infinite;
}

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

JavaScript代码：

var windmill = document.querySelector('.windmill');
var startBtn = document.querySelector('#startBtn');
var speedUpBtn = document.querySelector('#speedUpBtn');
var speedDownBtn = document.querySelector('#speedDownBtn');
var stopBtn = document.querySelector('#stopBtn');

var speed = 5; // 初始速度为5s/圈

startBtn.onclick = function() {
  windmill.classList.add('rotate');
}

speedUpBtn.onclick = function() {
  windmill.style.animationDuration = (speed - 1) + 's';
  speed--;
}

speedDownBtn.onclick = function() {
  windmill.style.animationDuration = (speed + 1) + 's';
  speed++;
}

stopBtn.onclick = function() {
  windmill.classList.remove('rotate');
}

解释：

首先，我们用querySelector方法获取到风车和四个按钮的元素，然后定义一个变量speed来保存风车的速度，初始速度为5s/圈。

接着，给开始按钮绑定一个点击事件，当点击开始按钮时，为风车元素添加rotate类，这个类在CSS中定义了一个动画效果，即让风车旋转起来。

然后，给加速按钮和减速按钮分别绑定点击事件。当点击加速按钮时，我们将风车动画的持续时间减1秒，即速度变快；当点击减速按钮时，我们将风车动画的持续时间加1秒，即速度变慢。同时，我们也要更新speed变量的值。

最后，给结束按钮绑定一个点击事件，当点击结束按钮时，移除风车元素的rotate类，即让风车停止转动