如何使div每秒自动旋转？

Question

所以我试图让div（盒子形状）顺时针旋转并每秒自动改变颜色。我的朋友做了改变颜色和时钟显示，它的工作原理。我试图复制格式并将其用于旋转，并且它不会每秒自动旋转。我真的不知道该怎么做。

function everySecond(){
    var newDate = new Date();
    var s = newDate.getSeconds();
    var m = newDate.getMinutes();
    var h = newDate.getHours();

    s = modifyTime(s);
    m = modifyTime(m);

    document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
$("#ball").css('background-color', randomColor());

}

function randomColor(){
    var choice = '0123456789ABCDEF';
    var color = '#';
    for(var i=0; i<6; i++){
        color += choice[Math.floor(Math.random()*16)];
    }
    return color;
}

$("#ball").css({'transform' : 'rotate('+ 30 +'deg)'});

function modifyTime(t){
    if(t<10){
        t="0"+t;
    };
    return t;
}

setInterval(everySecond, 1000);

Answer 1

$("#ball").css({'transform' : 'rotate('+ 30 +'deg)'});

正如其他人所指出的，上面的线只旋转到30度。我们需要修改这一行并将其放在everySecond()函数中。

var degreesToRoatate = 30;
$("#ball").css({'transform' : 'rotate('+ degreesToRoatate +'deg)'});

现在，我们需要将s（即秒）的值映射到degreesToRotate。

范围的s - ＆gt; 0到59

度数范围转动 - ＆gt; 0到359。

degreesToRotate = s*6;

div将在30秒内旋转180度。

最终代码变为：

    function everySecond(){
    var newDate = new Date();
    var s = newDate.getSeconds();
    var m = newDate.getMinutes();
    var h = newDate.getHours();
    var degreesToRotate = s*6;

    s = modifyTime(s);
    m = modifyTime(m);

    document.getElementById("time").innerHTML = h + ":" + m + ":" + s;

    $("#ball").css({'transform' : 'rotate('+ degreesToRotate +'deg)'});
    $("#ball").css('background-color', randomColor());

}

function randomColor(){
    var choice = '0123456789ABCDEF';
    var color = '#';
    for(var i=0; i<6; i++){
        color += choice[Math.floor(Math.random()*16)];
    }
    return color;
}

function modifyTime(t){
    if(t<10){
        t="0"+t;
    };
    return t;
}

setInterval(everySecond, 1000);

编辑：刚试过这个。这是小提琴：https://jsfiddle.net/jj5hrew1/

Answer 2

我已经在所有浏览器上测试了这个旋转功能，希望这是你想要的。

轮换

function rotateDiv(divObject, degrees, animation) {
    /**
     * Rotates a div
     * Usage: Pass through one div object or an array of div objects, specify degrees and if you want an animation
     **/
    var totalDivs = Array.isArray(divObject) ? divObject.length : 1;

    for (var i = 0; i < totalDivs; i++) {
        var thisDiv = Array.isArray(divObject) ? divObject[i] : divObject;
        thisDiv.css({
            // Animation
            '-webkit-transition': '-webkit-transform '+(animation ? 1 : 0)+'s',
            '-moz-transition': '-moz-transform '+(animation ? 1 : 0)+'s',
            '-ms-transition': '-ms-transform '+(animation ? 1 : 0)+'s',
            '-o-transition': '-o-transform '+(animation ? 1 : 0)+'s',
            'transition': 'transform '+(animation ? 1 : 0)+'s',

            // Rotation
            '-webkit-transform': 'rotate('+degrees+'deg)',
            '-moz-transform': 'rotate('+degrees+'deg)',
            '-ms-transform': 'rotate('+degrees+'deg)',
            '-o-transform': 'rotate('+degrees+'deg)',
            'transform': 'rotate('+degrees+'deg)',
        })
    }
}

用法

// Rotates 90 degrees clockwise with animation    
rotateDiv($('#div-to-rotate'), 90, true);

// Rotates 270 degrees clockwise without animation
rotateDiv($('.divs-to-rotate'), 270);

// Rotates multiple divs
rotateDiv([$('#div-1-to-rotate'), $('#div-2-to-rotate'), $('.more-divs')], 90, true);

最终结果

var scale = 1;
setInterval(function() {
    $('#div-to-rotate').css({'background':randomColor()});
    rotateDiv($('#div-to-rotate'), 90*scale, true);
    scale > 3 ? scale = 0 : scale++
}, 1000)

Answer 3

您需要将执行转换的行移动到everySecond（）函数中。 您还需要保留一个存储当前旋转的变量，并使用它来进行div旋转。 也使得对jQuery css（）的调用更加相似。

var curRotation = 0;

function everySecond()
{
    var newDate = new Date();
    var s = newDate.getSeconds();
    var m = newDate.getMinutes();
    var h = newDate.getHours();

    s = modifyTime(s);
    m = modifyTime(m);

    document.getElementById("time").innerHTML = h + ":" + m + ":" + s;

    $("#ball").css('background-color', randomColor());
    
    $("#ball").css('transform', 'rotate('+ curRotation +'deg)');
    
    curRotation += 10;
    if (curRotation >= 360)
      curRotation = 0;
}

function randomColor(){
    var choice = '0123456789ABCDEF';
    var color = '#';
    for(var i=0; i<6; i++){
        color += choice[Math.floor(Math.random()*16)];
    }
    return color;
}


function modifyTime(t){
    if(t<10){
        t="0"+t;
    };
    return t;
}

setInterval(everySecond, 1000);