js实现旋转大风车

下面是“JS实现旋转大风车”的完整攻略。

步骤一：HTML结构

首先，我们需要在HTML中编写一个容器div和两个风车翅膀的图片。具体代码如下：

<div id="windmill">
  <img class="blade" src="blade.png">
  <img class="blade" src="blade.png">
</div>

在上面的代码中，我们创建了一个id为“windmill”的div容器，里面有两个class为“blade”的img标签，这两个标签分别引用了本地的图片文件。

步骤二：CSS样式

接下来，我们需要为这些元素编写CSS样式，让他们处于我们想要的位置和旋转状态。具体代码如下：

#windmill {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 auto;
}

.blade {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  transform-origin: 50% 100%;
}

在上面的代码中，我们设置了一个宽高为200px的容器，并且居中显示。同时我们也为每个风车翅膀设置了CSS样式，让它们处于容器的中央并且以底部为旋转点。

步骤三：JS实现旋转

最后，让我们来到JS部分，通过JS实现风车的旋转。具体代码如下：

var blades = document.getElementsByClassName('blade');
var rotation = 0;
var speed = 1;

setInterval(function() {
  rotation += speed;
  for (var i = 0; i < blades.length; i++) {
    blades[i].style.transform = 'rotate(' + rotation + 'deg)';
  }
}, 10);

在上面的代码中，我们首先使用document.getElementsByClassName()方法获取所有的风车翅膀，并且声明了一个初始的旋转角度rotation和旋转速度speed。接着，我们使用setInterval()方法，每10毫秒执行一次函数，并在函数中循环所有风车翅膀，设置每个翅膀的CSS样式，使其旋转。

运行代码后，你将看到两个风车翅膀在容器中旋转，就像真实的风车一样。

示例1：修改旋转速度

你可以通过修改上面代码中的speed变量来改变风车旋转的速度。例如，我们将speed改为2，代码如下：

var blades = document.getElementsByClassName('blade');
var rotation = 0;
var speed = 2;

setInterval(function() {
  rotation += speed;
  for (var i = 0; i < blades.length; i++) {
    blades[i].style.transform = 'rotate(' + rotation + 'deg)';
  }
}, 10);

这时你就会看到风车的旋转速度加快了。

示例2：修改容器大小

你也可以修改上面代码中的容器大小，例如我们将容器的大小改为400px，代码如下：

#windmill {
  width: 400px;
  height: 400px;
  position: relative;
  margin: 0 auto;
}

这时你就会看到风车容器的大小变为了400px。