使HTML消息消失[重复]答案

【问题标题】：Make HTML message disappear [duplicate]使HTML消息消失[重复]
【发布时间】：2021-12-17 04:57:22
【问题描述】：

有人能告诉我如何让消息在几秒钟后消失吗？

$msg = '<h4 class="col-12 text-center mb-3 text-success">Sikeres rögzítés!</h4>';

收到 POST 后，它停留在那里，我需要重新加载以使其消失。

【问题讨论】：

使用javascript函数setTimeout()w3schools.com/jsreF/met_win_settimeout.asp
警告：您对SQL Injections 持开放态度，应该使用参数化的prepared statements，而不是手动构建查询。它们由PDO 或MySQLi 提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行，you are still in risk of corrupting your data。 Escaping is not enough!
@TóthLászló - 我还应该提到，FWIW，您可以选择从 PHP 端注入 javascript（带有 <script> 标记等），与 HTML 代码在同一字符串中你在注射。只需将它 (PHP-side) 添加到您正在回显的字符串中。如果您在 HTML below （之后）添加 JS - 即使它们在同一个字符串中被回显到 DOM 中 - 您无需担心 DOM 中存在的元素在 javascript 之前运行，这通常是需要牢记的。有关问题的更多信息，请参阅下面的两个链接。
addEventListener vs onclick when injecting new elements into the DOM AND A crash course in how DOM events work。两篇文章都值得一读，但第二篇写得很好，不容错过。

标签： php html mysql

【解决方案1】：

这必须在客户端（即在 javascript 中）完成，因为 PHP 在回显响应后完成（并且 PHP 仅在服务器端工作）。

这是一个建议的算法（伪代码）：

在 PHP 方面，将 autovanish 类（或任何你想要的）添加到你想要在这么多秒后自动消失的元素。

$msg = '<h4 class="autovanish col-12 text-center mb-3 text-success">Sikeres rögzítés!</h4>';

然后，让一个javascript函数一直运行：

function autovanish(){
   const avDivs = document.getElementsByClassName('autovanish');
   if (avDivs.length){
      setTimeout(() => {
          avDivs[0].remove();
      }, 3000); //removes the element after 3000ms
   }
   setTimeout(() => {autovanish();}, 500); //re-run every 500ms
}

如果您不是 js 专家，则需要在 avDivs 之后添加 [0]，因为 getElementsByClassName 返回一个集合，而不是字符串。

如果您需要比此伪代码更多的帮助，请在 cmets 中询问。

更新：

除了您发布的代码，前三行是您缺少的部分：

<script> 
    document.addEventListener('DOMContentLoaded',() => {
       autovanish();
    }

    function autovanish(){
    const avDivs = document.getElementsByClassName('autovanish');
    if (avDivs.length){
       setTimeout(function(){
           avDivs[0].remove();
       }, 3000); //removes the element after 3000ms
    }
    setTimeout(() => {autovanish();}, 500); //re-run every 500ms   
 }
</script>

感谢您发布完整的代码 - 让您可以轻松查看内容。两个快速的变化：（a）首先，我们需要启动（即“调用”）自动消失功能 - 否则它只是坐在那里，但从不运行。但在我们这样做之前： (b) 我们为 DOMContentLoaded 事件添加一个事件侦听器，并将对 autovanish 函数的调用放在那里。这样做的原因是因为在创建页面上的所有元素之前，您可能会尝试附加到页面上尚不存在的元素。（在这个例子中，（b）并不重要，但它是一个很好的概念，让你知道未来。） - cssyphus

【讨论】：