前端:js实现提示框(自动消失)

news/2025/3/21 10:41:11/

效果:

 

 代码:

<!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>//按钮1function showinfo1(){showNotification('我是第一条提示', 2000)}//按钮2function 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>


http://www.ppmy.cn/news/1081493.html

相关文章

人员位置管理,点亮矿山安全之路

矿山作为一个高危行业&#xff0c;安全问题一直备受关注。人员定位置管理是现代矿山安全管理的重要一环&#xff0c;可以帮助企业更好地实现对人员的实时监控和管理。因此&#xff0c;矿山人员位置管理系统对于矿山安全生产和管理非常重要&#xff0c;可以帮助减少安全事故的发…

263_C++_获取当前时钟的时间、对纳秒部分进行归一化为何%取余操作

这段代码定义了一个名为 getTimespec 的静态函数,用于计算一个相对时间增量后的 timespec 结构。 这个结构通常用于表示绝对时间或者持续时间。 让我们逐步解析这段代码的功能和作用: static struct timespec &getTimespec(long long nsecs, struct timespec &tv)…

微服务·架构组件之注册与发现

引言 微服务架构在现代软件开发中越来越受欢迎&#xff0c;它通过将系统拆分为多个小型、自治的服务来提高可维护性、可扩展性和灵活性。然而随着服务数量的增多&#xff0c;服务之间的通信何发现变得更加复杂。本报告旨在深入探讨微服务中的注册与发现&#xff0c;介绍其背景…

扫盲:常用NoSQL数据库

前言 关系型数据库产品很多&#xff0c;如 MySQL、Oracle、Microsoft SQL Sever 等&#xff0c;但它们的基本模型都是关系型数据模型。 非关系型数据库又称为&#xff1a;NoSQL &#xff0c;没有统一的模型&#xff0c;而且是非关系型的。 常见的 NoSQL 数据库包括键值数据库、…

又一关键系统上线,理想车云和自动驾驶系统登陆OceanBase

8 月 1 日&#xff0c;理想汽车公布 7 月交付数据&#xff0c;理想汽车 2023 年 7 月共交付新车 34,134 辆&#xff0c;同比增长 227.5%&#xff0c;并已连续两个月交付量突破三万。至此&#xff0c;理想汽车 2023 年累计交付量已经达到 173,251 辆&#xff0c;远超 2022 年全年…

C语言:三子棋小游戏

简介&#xff1a; 目标很简单&#xff1a;实现一个 三子棋小游戏。三子棋大家都玩过&#xff0c;规则就不提及了。本博文中实现的三子棋在对局中&#xff0c;电脑落子是随机的&#xff0c;不具有智能性&#xff0c;玩家的落子位置使用键盘输入坐标。下面开始详细介绍如何实现一…

一文全面了解APP积分墙

“积分墙”是在一个应用内展示各种积分任务(下载安装推荐的优质应用、注册、填表等),以供用户完成任务获得积分的页面。通俗点说,类似于用户在某一个应用中,看到一个悬赏榜(这个榜可以理解为“墙”),榜上有各种其他应用,不同的应用对应着不同的积分,只要用户根据规则(下载安装应…

【2】openGL shader着色器分析三角形填色

源代码在下面。文档查询 > docs.gl 结果展示&#xff1a;使用自己的shader和打印错误描述 该篇主要在上一部分代码的基础上添加了自己写的shader&#xff0c;即着色器。最常用的两个着色器 vertex shader 和 fragment shader&#xff0c;即顶点着色器和片段着色器。 大概…