我试图在每个星期天交换两个div

时间:2017-04-09 17:33:11

标签: html automation hide show swap

我有2个div,我试图在每个星期天11:59自动交换它们。我的divs:

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:2)

<html>
    <head>
        <title>HTML Title</title>
        <script>
            function changeDiv(){
                var d = new Date();
                if (d.getDay == 0 && d.getHours == 11 && d.getMinutes == 59) {
                    if (document.getElementById("cDisp").innerHTML == "Div2") {
                        document.getElementById("cDisp").innerHTML = "Div1";
                        document.getElementById("Div1").style.display = null;
                        document.getElementById("Div2").style.display = "none";
                    } else {
                        document.getElementById("cDisp").innerHTML = "Div2";
                        document.getElementById("Div1").style.display = "none";
                        document.getElementById("Div2").style.display = null;
                    }
                }
            }
        </script>
    </head>
    <body>
        <code id="cDisp">Div1</code>
        <br />
        <button name="changeDiV" onclick="changeDiv()">Change DIV</button>
        <div style="color: rgb(244,100,100);" id="Div1">
            <p>asdasdasdasda (Div1)</p>
        </div>
        <div style="display: none; color: rgb(22,232,123);" id="Div2">
            <p>1231231231313132 (Div2)</p>
        </div>
    </body>
</html>

这位兄弟将是正确的答案。我给你的第一个代码只会更改div容器的名称,但不会交换两个div来显示。

尝试运行此代码段(在此示例中,它会更改要显示的div并指示显示哪个div。

function changeDiv(){
    if (document.getElementById("cDisp").innerHTML == "Div2") {
        document.getElementById("cDisp").innerHTML = "Div1";
        document.getElementById("Div1").style.display = null;
        document.getElementById("Div2").style.display = "none";
    } else {
        document.getElementById("cDisp").innerHTML = "Div2";
        document.getElementById("Div1").style.display = "none";
        document.getElementById("Div2").style.display = null;
    }
}
<html>
    <head>
        <title>HTML Title</title>
    </head>
    <body>
        <code id="cDisp">Div1</code>
        <br />
        <button name="changeDiV" onclick="changeDiv()">Change DIV</button>
        <div style="color: rgb(244,100,100);" id="Div1">
            <p>asdasdasdasda (Div1)</p>
        </div>
        <div style="display: none; color: rgb(22,232,123);" id="Div2">
            <p>1231231231313132 (Div2)</p>
        </div>
    </body>
</html>