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

最新推荐文章于 2024-11-17 21:03:46 发布

Monn.

最新推荐文章于 2024-11-17 21:03:46 发布

阅读量252

点赞数 3

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/LY_LM/article/details/136320409

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、效果

二、代码

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>