使用 HTML、CSS 和 JavaScript 创建 Snackbar

Snackbar 是现代 Web 应用程序中常用的一种通知形式，它可以在应用程序的底部或顶部显示临时消息。在这篇文章中，我们将介绍如何使用 HTML、CSS 和 JavaScript 来创建 Snackbar。

HTML 结构

我们需要使用 HTML 来定义 Snackbar 的结构。我们将使用 <div> 元素来创建 Snackbar，其中包含一个文本消息和一个关闭按钮。

<div class="snackbar">
  <span class="message">这是一条消息。</span>
  <button class="close">关闭</button>
</div>

我们首先创建一个具有 “snackbar” 类名称的 <div> 元素，然后在其中添加一个带有 “message” 类名称的 <span> 元素和一个带有 “close” 类名称的 <button> 元素。

CSS 样式

我们使用 CSS 样式来创建 Snackbar 的外观和动画效果。我们将创建以下样式：

.snackbar {
  background-color: #333;
  color: #fff;
  padding: 15px;
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
  animation: slideup 0.5s;
}

@keyframes slideup {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}

.close {
  float: right;
  color: #fff;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.close:hover {
  text-decoration: underline;
}

我们首先将 Snackbar 的背景颜色设置为黑色，文本颜色设置为白色，并将其向屏幕底部固定。我们还将其 z-index 属性设置为 1，以便它位于其他元素的顶部。我们还将创建一个名为 “slideup” 的动画，它将在 Snackbar 中消息上升时播放。

我们还创建了一个名为 “close”的按钮，当用户单击该按钮时，它将关闭 Snackbar。我们将该按钮放置在 Snackbar 的右上角。当用户将鼠标悬停在“close”按钮上时，我们将设置下划线效果。

JavaScript 功能

最后，我们将使用 JavaScript 添加 Snackbar 的功能。我们将为 Snackbar 添加以下功能：

• 打开 Snackbar：当用户点击应用程序的某个按钮时，我们将显示 Snackbar。
• 关闭 Snackbar：当用户单击 Snackbar 中的“close”按钮时，我们将关闭 Snackbar。

我们将在 JavaScript 中创建以下代码：

// 选择 Snackbar 元素
const snackbar = document.querySelector(".snackbar");

// 选择 “close” 按钮元素
const closeBtn = snackbar.querySelector(".close");

// 在单击按钮时关闭 Snackbar
closeBtn.addEventListener("click", () => {
  snackbar.classList.remove("show");
});

// 打开 Snackbar
function openSnackbar() {
  snackbar.classList.add("show");
}

//显示 Snackbar
openSnackbar();

我们首先选择 Snackbar 和“close”按钮元素，然后向“close”按钮添加了一个单击事件监听器，以关闭 Snackbar。接下来，我们创建一个名为 openSnackbar() 的函数，该函数将向 Snackbar 添加“show”类名以显示 Snackbar。

最后，我们调用 openSnackbar() 函数以在应用程序中显示 Snackbar。

结论

现在，我们已经学习了如何使用 HTML、CSS 和 JavaScript 创建一个 Snackbar。Snackbar 是现代 Web 应用程序中非常有用的通知形式。如果您正在开发 Web 应用程序并想向用户显示消息或警告，那么使用 Snackbar 可以提高用户体验。