向javascript旋轉添加超時

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>