js使用按钮控制风车转动结合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: 200px;
  height: 200px;
  background: url('风车.png') no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate 1s linear infinite;
  animation-play-state: paused;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

JavaScript代码：

var windmill = document.querySelector('.windmill');
var startBtn = document.getElementById('startBtn');
var speedUpBtn = document.getElementById('speedUpBtn');
var speedDownBtn = document.getElementById('speedDownBtn');
var stopBtn = document.getElementById('stopBtn');
var speed = 1;

startBtn.addEventListener('click', function() {
  windmill.style.animationPlayState = 'running';
});

speedUpBtn.addEventListener('click', function() {
  speed += 0.1;
  windmill.style.animationDuration = 1 / speed + 's';
});

speedDownBtn.addEventListener('click', function() {
  if (speed > 0.1) {
    speed -= 0.1;
    windmill.style.animationDuration = 1 / speed + 's';
  }
});

stopBtn.addEventListener('click', function() {
  windmill.style.animationPlayState = 'paused';
});

解释说明：

1. 首先利用querySelector()方法选中页面中的风车元素，以及getElementById()方法选中四个按钮元素。
2. 对开始按钮添加click事件监听，当点击时，将风车的animation-play-state属性设置为'running'，即开始运行动画。
3. 对加速按钮添加click事件监听，每次点击时，将速度speed增加0.1，同时根据新的速度重新设置风车的animation-duration属性，使其转动速度加快。
4. 对减速按钮添加click事件监听，每次点击时，将速度speed减少0.1，同时根据新的速度重新设置风车的animation-duration属性，使其转动速度减慢。注意要判断速度是否小于0.1，避免出现负数速度导致动画异常。
5. 对结束按钮添加click事件监听，当点击时，将风车的animation-play-state属性设置为'paused'，即停止动画