js toast弹出提示信息|极客笔记

js toast弹出提示信息

在Web开发中，我们经常需要弹出一些提示信息来告知用户某些操作的结果或者提醒用户进行某些操作。而Toast就是一种常用的提示框，它会以一种非常简洁、优雅的方式展示在页面上。本文将介绍如何使用JavaScript来实现Toast的功能，并提供一些示例代码供参考。

什么是Toast

Toast是一种轻量级的提示框，通常以文本信息的形式显示在页面的某个固定位置上，通常会在一段时间后自动消失。它不会影响用户体验，不会打断用户的操作，是一种很好的用户提示方式。

基本实现

在开始实现Toast之前，我们首先需要创建一个HTML结构来容纳Toast，并定义一些基本的CSS样式。下面是一个简单的HTML结构和CSS样式：

<div class="toast" id="toast"></div>

<style>
.toast {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 9999;
}
</style>

在上面的代码中，我们定义了一个隐藏状态的div元素作为Toast提示框，并设置了样式使其位于页面底部居中显示，背景为半透明黑色。

接下来，我们需要编写JavaScript代码来控制Toast的显示和隐藏。下面是一个简单的实现：

function showToast(message) {
  var toast = document.getElementById('toast');
  toast.innerText = message;
  toast.style.display = 'block';
  setTimeout(function() {
    toast.style.display = 'none';
  }, 2000); // 2秒后自动隐藏
}

在上面的代码中，我们定义了一个showToast函数，用来显示Toast提示框。该函数接受一个参数message，用来指定要显示的提示信息。首先找到Toast元素并设置提示信息，然后将其显示出来，并在2秒后自动隐藏。

使用示例

现在我们来演示一下如何使用上面的Toast功能。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Toast示例</title>
  <div class="toast" id="toast"></div>

  <style>
    .toast {
      display: none;
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      padding: 10px 20px;
      border-radius: 5px;
      z-index: 9999;
    }
  </style>
</head>
<body>

  <button onclick="showToast('Hello, World!')">显示Toast</button>

  <script>
    function showToast(message) {
      var toast = document.getElementById('toast');
      toast.innerText = message;
      toast.style.display = 'block';
      setTimeout(function() {
        toast.style.display = 'none';
      }, 2000); // 2秒后自动隐藏
    }
  </script>

</body>
</html>

在上面的示例中，我们定义了一个按钮，点击按钮时会弹出一个Toast提示框显示”Hello, World!”。用户点击按钮后，Toast提示框会在页面底部居中显示，并在2秒后自动消失。

高级功能

除了基本的显示和隐藏功能，我们还可以对Toast进行一些扩展和定制。比如可以设置Toast的持续时间、样式，甚至可以添加动画效果等。

下面是一个进阶版的Toast代码，实现了定制化的展示和隐藏动画：

function showToast(message, duration = 2000) {
  var toast = document.getElementById('toast');
  toast.innerText = message;
  toast.style.animation = 'fadein 0.5s, fadeout 0.5s ' + (duration / 1000) + 's forwards';
}

// 添加CSS动画效果
var style = document.createElement('style');
style.innerHTML = `
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}
`;
document.head.appendChild(style);

在上面的代码中，我们为Toast添加了一个自定义的CSS动画效果，实现了渐显和渐隐的过程。同时我们也对showToast函数进行了一些改进，现在它可以接受一个额外的参数duration，用来指定Toast持续显示的时间。