纯js 写一个 toast 提示框 并且包含css

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Toast Demo</title>
	<link rel="stylesheet" type="text/css" href="toast.css">
</head>
<body>
	<button onclick="showToast()">Show Toast</button>
	<script type="text/javascript" src="toast.js"></script>
</body>
</html>

CSS:

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

.toast.show {
    opacity: 1;
}

JavaScript:

function showToast() {
    var toast = document.createElement('div');
    toast.classList.add('toast');
    toast.innerHTML = 'This is a toast message!';
    document.body.appendChild(toast);
    setTimeout(function() {
        toast.classList.add('show');
        setTimeout(function() {
            toast.classList.remove('show');
            setTimeout(function() {
                document.body.removeChild(toast);
            }, 300);
        }, 3000);
    }, 100);
}

说明：

首先我们在 HTML 中引入了 CSS 和 JS 文件。
CSS 中定义了 toast 的样式，包括位置、背景色、颜色、边框、圆角等，同时也定义了 toast 显示和隐藏的动画过渡效果。
JavaScript 中定义了一个 showToast 函数，该函数会生成一个 div 元素作为 toast，然后添加到页面中。接着设置一个定时器，用于延迟显示 toast，并在显示后再延迟一段时间后隐藏，并在隐藏后移除该元素。
在 HTML 中的按钮上添加了一个点击事件，用于触发显示 toast 的函数。

效果：

点击按钮后，页面底部会出现一个黑色的 toast 提示框，3 秒后自动消失。

纯js 写一个 toast 提示框 并且包含css

纯js 写一个 toast 提示框并且包含css