Question

我有以下代码可以使用（仅限Firefox和Safari） - 不用担心这是一个微妙的效果，不需要完美的跨浏览器兼容性。）

HTML

<span id="rotate_star"></div>

Javscript

<script>
    var count = 0;
    function rotate() {
      var elem2 = document.getElementById('rotate_star');
      elem2.style.MozTransform = 'rotate('+count+'deg)';
      elem2.style.WebkitTransform = 'rotate('+count+'deg)';
      if (count==360) { count = 0 }
      count+=10;
      window.setTimeout(rotate, 30);
    }
    window.setTimeout(rotate, 100);
</script>

老实说，在javascript方面，我不是世界上最精明的人。我希望这个动画在无限循环中重复，但是我想让它在每次完全旋转360度时延迟5秒。

有人可以帮忙吗？

Answer 1

你只需要稍微修改它，它应该做你想要的。试试这个：

<script>
    var count = 0;
    function rotate() {
      var elem2 = document.getElementById('rotate_star');
      elem2.style.MozTransform = 'rotate('+count+'deg)';
      elem2.style.WebkitTransform = 'rotate('+count+'deg)';
      if (count==360) { 
          count = 10;
          window.setTimeout(rotate, 5000);
      } else {
          count += 10;
          window.setTimeout(rotate, 30);
      }
    }
    window.setTimeout(rotate, 100);
</script>

为javascript循环添加超时

1 个答案: