纯 JavaScript 实现 Toast 提示框 - 带样式和示例

以下是一个简单的纯 JavaScript 实现的 Toast 提示框，包含 HTML、CSS 和 JavaScript 代码以及使用方法示例：

HTML 代码

<div id='toast'></div>

CSS 代码

#toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  display: none;
}

JavaScript 代码

function showToast(message, duration) {
  duration = duration || 3000;
  var toast = document.getElementById('toast');
  if (!toast) {
    toast = document.createElement('div');
    toast.id = 'toast';
    document.body.appendChild(toast);
  }
  toast.innerHTML = message;
  toast.style.display = 'block';
  setTimeout(function() {
    toast.style.display = 'none';
  }, duration);
}

使用方法

showToast('Hello World!');

可以通过第二个参数设置提示框显示时间，单位为毫秒。例如：

showToast('Hello World!', 5000);