纯 JavaScript 实现 Toast 提示框 (含 CSS 代码)

本文将使用纯 JavaScript 代码实现一个简单的 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 文件 toast.css 和 JavaScript 文件 toast.js。
- 创建一个按钮，点击触发 showToast() 函数。
CSS 代码:
- toast 类定义了 Toast 的基本样式，包括定位、背景色、颜色、边距、圆角等，并设置了透明度和过渡效果。
- toast.show 类定义了 Toast 显示时的透明度为 1，实现了显示效果。
JavaScript 代码:
- showToast() 函数创建了一个 div 元素，并添加 toast 类名。
- 将 Toast 元素的内容设置为 'This is a toast message!'。
- 将 Toast 元素添加到页面中。
- 使用 setTimeout 延迟 100 毫秒后，将 Toast 显示出来。
- 再使用 setTimeout 延迟 3 秒后，将 Toast 隐藏起来。
- 最后使用 setTimeout 延迟 300 毫秒后，移除 Toast 元素。

效果

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

总结

本文介绍了如何使用纯 JavaScript 代码实现一个简单的 Toast 提示框，并附带了相应的 CSS 代码。您可以根据自己的需求修改代码，例如更改 Toast 的样式，设置不同的提示信息，以及调整显示和消失的时间等。