css 如何使一个动态的div在几秒钟后消失

oalqel3c  于 2022-12-20  发布在  其他
关注(0)|答案(3)|浏览(493)

我想让第一扇门在我点击第一个按钮的5秒后消失。然后是第二扇门,第三扇门...一个接一个。所以我应该在函数toogleDoor中添加代码。
我尝试使用JQuery,但失败了。
你有什么建议吗?
'

<div class="backDoor">
    <div class="door5" id="door5">
        <div class="door4" id="door4">
            <div class="door3" id="door3">
                <div class="door2" id="door2">
                    <div class="door1" id="door1">
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div>
    <input type="text" id="parola"></input>
  
    <button id="button1" onclick="toggleDoor(1)">
        Apri prima porta
    </button>
    <button id="button2" onclick="toggleDoor(2)">
        Apri seconda porta
    </button>
    <button id="button3" onclick="toggleDoor(3)">
        Apri terza porta
    </button>
    <button id="button4" onclick="toggleDoor(4)">
        Apri quarta porta
    </button>
    <button id="button5" onclick="toggleDoor(5)">
        Apri quinta porta
    </button>
    <script>
        
      function toggleDoor(door) {
    // Find the proper door
    element = document.querySelector('.door' + door); // With constructed reference

    
    if (element) { // does the door exist?
        if (checkParola(door)) { // proper password?
            element.classList.toggle("openDoor");
            // Here I want to make the selected door to dissapear after 5 seconds
    };
};
      };

'

yizd12fk

yizd12fk1#

你可以使用setTimeout()来使门消失,只需要在类中使用一个箭头函数来切换类。

setTimeout(()=>{
  element.classList.toggle("openDoor")
}, 5000)

这将在5000毫秒(5秒)后提示类更改。在CSS的openDoor类中,必须使用display:none;或可见性:隐藏;以使上述代码正常工作。

31moq8wy

31moq8wy2#

您可以尝试使用setTimeout函数。

<div class="backDoor">
    <div class="door5" id="door5">
        <div class="door4" id="door4">
            <div class="door3" id="door3">
                <div class="door2" id="door2">
                    <div class="door1" id="door1">
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div>
    <input type="text" id="parola"></input>
<button id="button1" onclick="toggleDoor(1)">
    Apri prima porta
</button>
<button id="button2" onclick="toggleDoor(2)">
    Apri seconda porta
</button>
<button id="button3" onclick="toggleDoor(3)">
    Apri terza porta
</button>
<button id="button4" onclick="toggleDoor(4)">
    Apri quarta porta
</button>
<button id="button5" onclick="toggleDoor(5)">
    Apri quinta porta
</button>
<script>
    
  function toggleDoor(door) {
// Find the proper door
element = document.querySelector('.door' + door); // With constructed reference

if (element) { // does the door exist?
    if (checkParola(door)) { // proper password?
        element.classList.toggle("openDoor");
        // Here I want to make the selected door to dissapear after 5 seconds
        setTimeout(function(){
            element.style.display = "none";
        }, 5000);
    }
}
    };
};
x6yk4ghg

x6yk4ghg3#

这个想法还不够清楚,我不明白你到底想做什么,如果每扇门都有自己的按钮和功能,为什么你要把div嵌套在其他的里面.
但是...
如果要在一段时间后应用任何函数,可以使用setTimeout()方法,该方法有两个参数,第一个是函数,第二个是以毫秒为单位的时间:

setTimeout(dothing, 100)  // will apply "dothing" after 100 milliseconds

function dothing() {
    // your code here
}

如果你想传递参数给你的函数,你可以这么做:

setTimeout( function() { dothing( params ) }, 100 )

如果它误解了你的问题,请多解释一下,以便能有所帮助。

相关问题