js toast

// 创建一个简单的 Toast 消息提示功能

function showToast(message, duration = 3000) {
    // 创建一个 div 元素作为 toast 容器
    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.innerText = message;

    // 将 toast 添加到页面中
    document.body.appendChild(toast);

    // 设置 toast 的样式
    toast.style.position = 'fixed';
    toast.style.bottom = '20px';
    toast.style.left = '50%';
    toast.style.transform = 'translateX(-50%)';
    toast.style.backgroundColor = '#333';
    toast.style.color = '#fff';
    toast.style.padding = '10px 20px';
    toast.style.borderRadius = '4px';
    toast.style.opacity = '0';
    toast.style.transition = 'opacity 0.5s';

    // 显示 toast
    setTimeout(() => {
        toast.style.opacity = '1';
    }, 100);

    // 在指定时间后隐藏 toast
    setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 500);
    }, duration);
}

// 使用示例
showToast('这是一个 Toast 提示', 2000);

解释说明：

• showToast 函数用于创建并显示一个短暂的提示消息（即 Toast）。
• message 参数是你要显示的消息文本。
• duration 参数是消息显示的时间，默认为 3000 毫秒（3 秒）。
• Toast 消息会在页面底部居中显示，并在指定时间后自动消失。