如何在没有 Bootstrap 或 Jquery 的情况下 3 秒后打开和关闭模式

Question

我是学习 JavaScript 的新手，我试图在出现 3 秒后打开然后关闭自定义消息，但我的 function 不起作用。 该消息出现但没有消失...您能帮我找到解决方案吗，因为我一个人找不到。 非常感谢 ！

 const confirmationMessage = document.getElementById("message_validation"); // launch confirmationMessage form const launchConfirmationMessage = () => { confirmationMessage.style.display = "flex"; } //close confirmationMessage form const closeConfirmationMessage = () => { confirmationMessage.style.display = "none"; } // TimeOut du confirmationMessage const timeOutConfirmMess = () => { setTimeout(closeConfirmationMessage, 3000); } // open and close window after 3s function confirm() { if (launchConfirmationMessage() = true && closeConfirmationMessage() === false) { timeOutConfirmMess(); } } console.log(confirm());

 .message-validation { display: none; align-items: center; justify-content: center; position: fixed; z-index: 1; left: 13%; top: 41%; overflow: auto; background-color: rgba(26, 39, 156, 0.9); color: white; padding: 5%; border-radius: 5px; }

 <div id="message_validation" class="message-validation"> Bravo. Votre réservation est prise en compte. </div>

此外，基本上 css 元素在 display:none 中，并且在它变成 display:block 的情况下，如下所示：

if (isOk){ confirm();}

再次感谢你！

Answer 1

显示确认消息后立即调用setTimeout 3000 毫秒。 这样，关闭 function 将在 3 秒后被调用。 confirm function 是不必要的，所以我删除了它。 以下作品。

 const confirmationMessage = document.getElementById("message_validation"); // launch confirmationMessage form const launchConfirmationMessage = () => { confirmationMessage.style.display = "flex"; setTimeout(closeConfirmationMessage, 3000); } //close confirmationMessage form const closeConfirmationMessage = () => { confirmationMessage.style.display = "none"; } launchConfirmationMessage();

 .message-validation{ display: none; align-items: center; justify-content: center; position: fixed; z-index: 1; left: 13%; top: 41%; overflow: auto; background-color: rgba(26, 39, 156, 0.9); color: white; padding: 5%; border-radius: 5px; }

 <div id="message_validation" class="message-validation"> Bravo. Votre réservation est prise en compte. </div>

此外，在您的confirm function 中， if语句永远不会返回true ，因为函数不返回 boolean 值。

因此，不要使用confirm function。只需在isOk为真时调用launchConfirmationMessage 。 我在代码片段中立即调用它，让您看到它是否有效，但在您的代码库中，您可以改用以下代码。

if (isOk) {
  launchConfirmationMessage();
}

Answer 2

您的代码中的问题是这个 if 子句：

if (launchConfirmationMessage() = true && closeConfirmationMessage() === false){ 
  // ... 
}

错误不止一处：

1. 您调用的函数没有任何返回值，因此closeConfirmationMessage() === false永远不会为真，并且launchConfirmationMessage() = true也
2. 您尝试将true分配给launchConfirmationMessage的调用：只有一个等号而不是两个或三个

以下是您的代码稍作更正：

 const confirmationMessage = document.getElementById("message_validation"); // launch confirmationMessage form const launchConfirmationMessage = () => { confirmationMessage.style.display = "flex"; } //close confirmationMessage form const closeConfirmationMessage = () => { confirmationMessage.style.display = "none"; } // TimeOut du confirmationMessage const timeOutConfirmMess = () => { setTimeout(closeConfirmationMessage, 3000); } // open and close window after 3s function confirm() { launchConfirmationMessage(); timeOutConfirmMess(); } console.log(confirm());

 .message-validation { display: none; align-items: center; justify-content: center; position: fixed; z-index: 1; left: 13%; top: 41%; overflow: auto; background-color: rgba(26, 39, 156, 0.9); color: white; padding: 5%; border-radius: 5px; }

 <div id="message_validation" class="message-validation"> Bravo. Votre réservation est prise en compte. </div>

Answer 3

首先，您的 if 语句不正确。 在 if 语句中，你总是比较两个东西，你使用“==”或“===”。 您也不会在帮助程序 function 中返回任何值。

对于此代码，我不推荐助手 function，下面的代码将起作用。

 const confirmationMessage = document.getElementById("message_validation"); // open and close window after 3s function confirm () { confirmationMessage.style.display = "flex"; setTimeout(() => { confirmationMessage.style.display = "none"; }, 3000) } console.log(confirm());