Javascript菜单图标旋转90度Onclick并在第二次单击时旋转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)";
       }
}