纯js 写一个 toast 提示框 并且样式 也是用js写的

以下是一个简单的纯js实现的toast提示框：

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;
}

JS代码：

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);