Javascript 每5秒后更改div的旋转方向

我有两个divi.e div1和div2，div1逆时针旋转，另一个div2顺时针旋转。现在我想让两个div在每5秒后连续改变它们的旋转方向，比如如果div1在5秒后顺时针旋转，它会逆时针旋转，然后在5秒后顺时针旋转，等等。在另一个部门中应用了相同的过程

<div id="div1" style="height:100px; width:100px; border:2px solid gray">div1 </div>
<div id="div2" style="margin-top:100px; height:100px; width:100px; border:2px solid Red">div2</div>

<script>
     rotate(0,0);
     function rotate(degree1, degree2) {
            $("#div1").css({ WebkitTransform: 'rotate(' + degree1 + 'deg)' });
            $("#div2").css({ WebkitTransform: 'rotate(' + degree2 + 'deg)' });
            $("#div1").css({ '-moz-transform': 'rotate(' + degree1 + 'deg)'}); 
            $("#div2").css({ '-moz-transform': 'rotate(' + degree2 + 'deg)'}); 
            timer = setTimeout(function () {
                rotate(++degree1, --degree2);
                }, 5);
            } 
</script>

---

如果我正确理解了您的问题，这就是您需要的代码，下面是一个：

---

如果我正确理解了您的问题，这就是您需要的代码，下面是一个：

你必须打发时间。另一种方法是从起点计算

 var counter = 0; var reverse = false;
    rotate(0,0);
    function rotate(degree1, degree2) {
        $("#div1").css({ WebkitTransform: 'rotate(' + degree1 + 'deg)' });
        $("#div2").css({ WebkitTransform: 'rotate(' + degree2 + 'deg)' });
        $("#div1").css({ '-moz-transform': 'rotate(' + degree1 + 'deg)'}); 
        $("#div2").css({ '-moz-transform': 'rotate(' + degree2 + 'deg)'}); 
        timer = setTimeout(function () {
            counter += 5;
            if (counter == 5000) { counter = 0; reverse = reverse ? false : true;}
            if (reverse) rotate(--degree1, ++degree2);
            else rotate(++degree1, --degree2);
        }, 5);
    } 

你必须打发时间。另一种方法是从起点计算

 var counter = 0; var reverse = false;
    rotate(0,0);
    function rotate(degree1, degree2) {
        $("#div1").css({ WebkitTransform: 'rotate(' + degree1 + 'deg)' });
        $("#div2").css({ WebkitTransform: 'rotate(' + degree2 + 'deg)' });
        $("#div1").css({ '-moz-transform': 'rotate(' + degree1 + 'deg)'}); 
        $("#div2").css({ '-moz-transform': 'rotate(' + degree2 + 'deg)'}); 
        timer = setTimeout(function () {
            counter += 5;
            if (counter == 5000) { counter = 0; reverse = reverse ? false : true;}
            if (reverse) rotate(--degree1, ++degree2);
            else rotate(++degree1, --degree2);
        }, 5);
    } 

使用全局计数器和布尔。当计数器命中时间目标时，切换布尔值。根据布尔值调用旋转函数

---

使用全局计数器和布尔。当计数器命中时间目标时，切换布尔值。基于bool值调用旋转函数。

$$div2.css{'-moz transform'：'rotate'+degree2+'deg'}；有一美元不应该在那里。无论如何，我还没有真正理解，你想让你的div每5秒改变一次旋转方向吗？这是一个输入错误@LightStylesetTimeout作为第二个参数毫秒，而不是秒，所以应该是5000。你可以组合你的.css调用，还可以将你的div1和div2 jQuery对象存储在函数之外，因此，您不必在每次迭代中搜索整个文档。或者至少指定一个比整个文档$$div2.css{'-moz transform'：rotate'+degree2+'deg'更好的上下文；有一美元不应该在那里。无论如何，我还没有真正理解，你想让你的div每5秒改变一次旋转方向吗？这是一个输入错误@LightStylesetTimeout作为第二个参数毫秒，而不是秒，所以应该是5000。你可以组合你的.css调用，还可以将你的div1和div2 jQuery对象存储在函数之外，因此，您不必在每次迭代中搜索整个文档。或者至少指定一个比整个文档更好的上下文

 var counter = 0; var reverse = false;
    rotate(0,0);
    function rotate(degree1, degree2) {
        $("#div1").css({ WebkitTransform: 'rotate(' + degree1 + 'deg)' });
        $("#div2").css({ WebkitTransform: 'rotate(' + degree2 + 'deg)' });
        $("#div1").css({ '-moz-transform': 'rotate(' + degree1 + 'deg)'}); 
        $("#div2").css({ '-moz-transform': 'rotate(' + degree2 + 'deg)'}); 
        timer = setTimeout(function () {
            counter += 5;
            if (counter == 5000) { counter = 0; reverse = reverse ? false : true;}
            if (reverse) rotate(--degree1, ++degree2);
            else rotate(++degree1, --degree2);
        }, 5);
    }