如何使用 JavaScript 实现消息提示框自动消失-php教程-PHP中文网

如何使用 JavaScript 实现消息提示框自动消失

花韻仙語

发布： 2025-09-11 17:39:30

原创

764人浏览过

如何使用 javascript 实现消息提示框自动消失

本文将介绍如何使用 JavaScript 实现一个简单的消息提示框，该提示框在页面加载后显示一段时间，然后自动消失。我们将通过添加 CSS 类和编写 JavaScript 函数来实现这一功能，并提供详细的代码示例和注意事项，帮助你快速掌握这一实用技巧。

在 Web 开发中，经常需要在页面上显示一些临时的消息提示，例如操作成功或失败的提示。这些提示信息通常不需要一直显示在页面上，而是希望在一段时间后自动消失。本文将介绍如何使用 JavaScript 实现这一功能。

准备工作

首先，我们需要一个 HTML 元素来显示消息提示。例如，我们可以使用一个 <div> 元素，并为其添加一些 CSS 样式，使其看起来像一个消息提示框。

<div class="message-box autovanish col-12 text-center mb-3 text-success">
  操作成功！
</div>

登录后复制

在这个例子中，我们给 <div> 元素添加了以下 CSS 类：

立即学习“Java免费学习笔记（深入）”；

message-box: 用于定义消息提示框的基本样式。
autovanish: 用于标识需要自动消失的元素，这个类很重要，后续的JavaScript代码会依赖它。
col-12 text-center mb-3 text-success: 这些是 Bootstrap 提供的样式类，用于设置元素的宽度、文本对齐方式、边距和颜色。你可以根据自己的需要修改这些样式。

JavaScript 代码实现

接下来，我们需要编写 JavaScript 代码来实现消息提示框的自动消失功能。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

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

  function autovanish() {
    const avDivs = document.getElementsByClassName('autovanish');
    if (avDivs.length) {
      setTimeout(function() {
        avDivs[0].remove();
      }, 3000); // 3000 毫秒 (3 秒) 后移除元素
    }
    setTimeout(() => { autovanish(); }, 500); // 每 500 毫秒重新运行一次
  }
</script>

登录后复制

这段代码主要做了以下几件事：

document.addEventListener('DOMContentLoaded', () => { ... });: 这行代码确保 JavaScript 代码在整个 HTML 文档加载完毕后才执行。 DOMContentLoaded 事件在初始 HTML 文档被完全加载和解析完成后触发，无需等待样式表、图像和子框架的完成。
autovanish() 函数: 这个函数是核心，它负责查找所有带有 autovanish 类的元素，并在指定的时间后移除它们。
document.getElementsByClassName('autovanish'): 这个方法返回一个包含所有具有 autovanish 类的元素的 HTMLCollection。
if (avDivs.length): 这个条件判断确保只有当页面上存在带有 autovanish 类的元素时，才会执行后续的代码。
setTimeout(function() { ... }, 3000);: 这个函数用于设置一个定时器，在 3000 毫秒 (3 秒) 后执行指定的代码。在这个例子中，指定的代码是 avDivs[0].remove();，它用于移除第一个带有 autovanish 类的元素。
setTimeout(() => { autovanish(); }, 500);: 这行代码也很重要，它每隔 500 毫秒重新运行 autovanish() 函数。这样做的目的是为了处理动态添加的带有 autovanish 类的元素。如果没有这行代码，那么只有在页面加载时就存在的元素才能自动消失。

完整示例

下面是一个完整的示例，展示了如何使用 HTML 和 JavaScript 实现消息提示框的自动消失功能：

<!DOCTYPE html>
<html>
<head>
  <title>消息提示框自动消失</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

  <div class="message-box autovanish col-12 text-center mb-3 text-success">
    操作成功！
  </div>

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

    function autovanish() {
      const avDivs = document.getElementsByClassName('autovanish');
      if (avDivs.length) {
        setTimeout(function() {
          avDivs[0].remove();
        }, 3000); // 3000 毫秒 (3 秒) 后移除元素
      }
      setTimeout(() => { autovanish(); }, 500); // 每 500 毫秒重新运行一次
    }
  </script>

</body>
</html>

登录后复制