Javascript 菜单图标在单击时旋转 90 度并在第二次单击时旋转 90 度

Question

我希望在单击时将菜单图标旋转 90 度，并在用户第二次单击时将其旋转 90 度。

我正在使用 Javascript 中的一个功能，想知道如何让它在用户第二次单击时再旋转 90 度。

function spin(){

    var spin1 = document.getElementById("spin");
        spin2 = document.getElementById("spin");

    spin1.style.transform = "rotate(90deg)";

}

Answer 1

试试这个：

var angle = 0;
function spin(){
    var spin1 = document.getElementById("spin");
    spin2 = document.getElementById("spin");
    angle+=90;
    spin1.style.transform = "rotate("+angle+"deg)";
}

每次按下它都会让它旋转 90 度。如果你想限制为 2 :

var flag = false;
function spin(){
    var spin1 = document.getElementById("spin");
    spin2 = document.getElementById("spin");
    spin1.style.transform = "rotate("+(flag?180:90)+"deg)";
    flag = true;
}

Answer 2

您可以试试下面的功能

var click =false
function spin(){
        var spin1 = document.getElementById("spin");
        var spin2 = document.getElementById("spin");
    if(!click){
        spin1.style.transform = "rotate(90deg)";
        click=true;
       }else{
        click=false;
        spin1.style.transform = "rotate(180deg)";
       }
}

Javascript 菜单图标在单击时旋转 90 度并在第二次单击时旋转 90 度

Javascript menu icon to rotate 90 Degrees Onclick and rotate 90 degrees on second click

javascript

jquery

android

transform

rotation