效果：

 

 代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自动提示消息</title>
    </head>
    <style>
        .notification {
            position: fixed;
            top: 5%;
            left: 2%;
            padding: 15px;
            background-color: #f0f0f0;
            color: #333;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            opacity: 1;
            transition: opacity 0.3s ease-in-out;
        }

        .notification:hover {
            opacity: 0.8;
        }
    </style>
    <script>
        //按钮1
        function showinfo1(){
            showNotification('我是第一条提示', 2000)
        }
        //按钮2
        function showinfo2(){
            showNotification('我是第二条提示', 2000)
        }
        //提示信息
        function showNotification(message, duration) {
            var notification = document.createElement('div');
            notification.className = 'notification';
            notification.textContent = message;
            document.body.appendChild(notification);
            setTimeout(function () {
                notification.style.opacity = 0;
                setTimeout(function () {
                document.body.removeChild(notification);
                }, 1000);
            }, duration);
        }
        
    </script>
    <body>
        <button onclick="showinfo1()">点我出现提示1</button>
        <button onclick="showinfo2()">点我出现提示2</button>
    </body>
</html>

# 前端 # javascript # 开发语言
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

MySQL全文索引源码剖析之Insert语句执行过程

avatar 华为云开发者联盟
cover

openGauss - 向量化执行引擎 - distinct分组聚合的实现

avatar 华为云开发者联盟
cover

【酷哥说库|GaussDB微动画】GaussDB数据库透明数据加密

avatar 华为云开发者联盟