纯js 写一个 toast 提示框 css代码 和 html代码 也用js写别单独的在定义style

HTML代码：

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

CSS代码：

#toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#toast.show {
  opacity: 1;
}

JS代码：

function showToast(message, duration) {
  var toast = document.getElementById("toast");
  toast.innerHTML = message;
  toast.classList.add("show");
  setTimeout(function() {
    toast.classList.remove("show");
  }, duration);
}

// 示例，显示 "Hello World" 3秒钟
showToast("Hello World", 3000);