不重要的一些操作（一）：3s操作成功提示框

一、效果

二、代码

html代码：

<div id="successMessage">操作成功</div>
<button onclick="simulateSuccess()">模拟操作成功</button>

css样式：

#successMessage {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #4CAF50;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    z-index: 9999;
}

原生js事件：

<script>
	// 显示操作成功提示
function showSuccessMessage() {
    var successMessage = document.getElementById("successMessage");
    successMessage.style.display = "block";
    // 3 秒后自动隐藏
    setTimeout(function() {
        successMessage.style.display = "none";
    }, 3000);
}
// 模拟操作成功，并显示提示
function simulateSuccess() {
    // 这里可以执行操作成功后的逻辑，例如提交表单、保存数据等
    // 这里只是简单地调用显示成功提示的函数
    showSuccessMessage();
}

</script>