设置自动隐藏 toast JavaScript

在网页应用程序中，Toast 是一种弹出式通知，用于向用户显示简短的消息。它可以在屏幕的底部或顶部显示，并在一定时间后自动隐藏。在本文中，我们将介绍如何使用 JavaScript 设置自动隐藏的 Toast。

实现自动隐藏

我们可以使用 setTimeout() 函数在特定时间后隐藏 Toast。该函数有两个参数，第一个参数是要执行的函数，第二个参数是等待的毫秒数。以下代码演示了如何使用 setTimeout() 函数在 3000 毫秒后隐藏 Toast：

const toast = document.getElementById("toast");

// 显示 Toast
toast.style.display = "block";

// 3 秒后隐藏 Toast
setTimeout(function(){
  toast.style.display = "none";
}, 3000);

在上述代码中，我们使用 getElementById() 方法获取 Toast 的元素，然后使用 style.display 属性在屏幕上显示 Toast。

接着，我们使用 setTimeout() 函数在 3000 毫秒后隐藏 Toast。 在要执行的函数中，我们设置 style.display 属性为 "none"，这将使 Toast 从屏幕上消失。

改进代码

为了使代码更有用，我们可以定义一个名为 showToast() 的函数，该函数可以显示 Toast 并在一定时间后自动隐藏。 以下代码演示了如何定义 showToast() 函数：

function showToast(message, duration) {
  const toast = document.getElementById("toast");

  // 设置 Toast 的文本内容
  toast.innerText = message;

  // 显示 Toast
  toast.style.display = "block";

  // duration 毫秒后隐藏 Toast
  setTimeout(function(){
    toast.style.display = "none";
  }, duration);
}

在上述函数中，我们首先获取 Toast 的元素，并使用 innerText 属性设置 Toast 的文本内容。接着，根据 duration 参数设置自动隐藏的时间，并使用 setTimeout() 函数在指定的时间后隐藏 Toast。

我们可以使用以下代码调用 showToast() 函数：

showToast("Hello World", 3000);

该代码将在屏幕上显示一个包含 "Hello World" 文本的 Toast，并在 3000 毫秒后自动隐藏。

总结

现在，我们已经知道如何使用 JavaScript 设置自动隐藏的 Toast。通过定义 showToast() 函数，我们可以在网页应用程序中轻松使用 Toast。自动隐藏的 Toast 可以帮助我们将简短的消息显示给用户，而不会打扰他们的程序使用。