当前位置： 首页 > news >正文

前端：js实现提示框（自动消失）

news 2026/3/31 13:53:23

效果：

 

 代码：

<!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>

相关文章：

前端：js实现提示框（自动消失）

效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&q…...

编程日记 2023/9/4 4:14:55

powerpc架构的前世今生

文章目录 Powerpc架构的前世今生什么是powerpc&#xff1f;PowerPC和ARM有什么区别呢&#xff1f; Powerpc架构的前世 PowerPC架构是一种基于精简指令集计算机&#xff08;RISC&#xff09;的处理器架构。它最初由IBM、Motorola和Apple共同开发&#xff0c;旨在为个人电脑、工…...

编程日记 2023/9/4 4:13:52

SQL-存储过程、流程控制、游标

存储过程 存储过程概述 1.产生背景 开发过程总&#xff0c;经常会遇到重复使用某一功能的情况 2.解决办法 MySQL引人了存储过程(Stored Procedure)这一技术 3.存储过程 存储过程就是一条或多条SQL语句的集合存储过程可将一系列复杂操作封装成一个代码块&#xff0c;以便…...

编程日记 2023/9/4 4:12:50

JavaScript的数组和字典的用法

JavaScript 中的数组是一种用于存储多个值的数据结构&#xff0c;它可以容纳不同类型的数据&#xff08;例如数字、字符串、对象等&#xff09;。以下是 JavaScript 数组的常见用法&#xff1a; 创建数组 // 创建一个空数组 let emptyArray [];// 创建一个包含元素的数组 le…...

编程日记 2023/9/4 4:11:50

中断和异常

1.什么是中断 CPU上会运行两种程序&#xff0c;一种是内核程序&#xff0c;一种是应用程序。在正常的情况&#xff0c;CPU上面会主动运行应用程序&#xff0c;中断就是操作系统内核夺回CPU执行权的唯一途径&#xff0c;也就是用户态——>内核态。 2.内中断和外中断 2.1内…...

编程日记 2023/9/4 4:10:48

【python】实现积分

借助sympy.integrate() 符号运算库&#xff0c;所以里面的exp()&#xff0c;sin()等都要使用sympy库中的函数&#xff0c;如果使用numpy库中的函数时没用的。 import sympy as sp import numpy as np x sp.symbols("x") print(sp.integrate(sp.exp(-x**2), (x, -s…...

编程日记 2023/9/4 4:09:46

微信仿H5支付

仿H5支付是指一种模拟原生H5支付流程的非官方支付方式。这种支付方式通常是由第三方支付服务提供商开发和维护的&#xff0c;目的是为了绕过官方支付渠道的限制&#xff0c;如费率、审核等问题。然而&#xff0c;由于仿H5支付并非官方授权和认可的支付方式&#xff0c;其安全性…...

编程日记 2023/9/4 4:08:45

数据结构——栈

栈 栈的理解 咱们先不管栈的数据结构什么&#xff0c;先了解栈是什么&#xff0c;栈就像一个桶一样&#xff0c;你先放进去的东西&#xff0c;被后放进的的东西压着&#xff0c;那么就需要把后放进行的东西拿出才能拿出来先放进去的东西&#xff0c;如图1&#xff0c;就像图1中…...

编程日记 2023/9/4 4:07:42

组件化开发之如何封装组件-react

组件化开发之如何封装组件-react 什么是组件为什么需要封装组件组件的分类函数组件&#xff08;Functional Components&#xff09;&#xff1a;展示型组件&#xff1a;容器型组件&#xff1a;知道组件分类的意义是&#xff1f; 如何拆分组件&#xff0c;需要遵循什么原则1.保证…...

编程日记 2023/9/4 4:06:41

大数据HBase学习圣经：一本书实现HBase学习自由

学习目标&#xff1a;三栖合一架构师 本文是《大数据HBase学习圣经》 V1版本&#xff0c;是 《尼恩 大数据 面试宝典》姊妹篇。 这里特别说明一下&#xff1a;《尼恩 大数据 面试宝典》5个专题 PDF 自首次发布以来&#xff0c; 已经汇集了 好几百题&#xff0c;大量的大厂面试…...

编程日记 2023/9/4 4:05:40

Leetcode110. 平衡二叉树

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 。 题解&#xff…...

编程日记 2023/9/4 4:04:39

Swift的NSClassFromString转换

在swift 中使用NSClassFromString 从string 转换到 对象&#xff0c;报了Segmentation fault: 11 错误。 let ctrlClass: AnyClass NSClassFromString("HomeViewController")! let ctrl: UIViewController ctrlClass.init() as UIViewController 正确的写法&…...

编程日记 2023/9/4 4:03:38

linux上vim编辑器设置

linux上vim编辑器设置 减少tab缩进、显示行号等 在vimrc&#xff08;一般在/etc/vim/vimrc中&#xff09;末尾添加 set helplangcn "中文帮助文档(前提是下了中文包) syntax enable syntax on " 自动语法高亮 set number"显示行号 colorscheme desert" 设…...

编程日记 2023/9/4 4:02:37

SpringCloudAlibaba OpenFeign整合及详解

SpringCloudAlibaba OpenFeign 在前面&#xff0c;我们使用Nacos服务注册发现后&#xff0c;服务远程调用可以使用RestTemplateRibbon或者OpenFeign调用。实际开发中很少使用RestTemplate这种方式进行调用服务&#xff0c;每次调用需要填写地址&#xff0c;还要配置各种的参数&…...

编程日记 2023/9/4 4:01:33

Mysql--技术文档--MVCC(Multi-Version Concurrency Control | 多版本并发控制)

MVCC到底是什么 MVCC&#xff08;Multi-Version Concurrency Control&#xff09;是一种并发控制机制&#xff0c;用于解决并发访问数据库时的数据一致性和隔离性问题。MVCC允许多个事务同时读取数据库的同一数据&#xff0c;而不会相互干扰或导致冲突。 在传统的并发控制机制中…...

编程日记 2023/9/4 4:00:32

全网都在用的nnUNet V2版本改进了啥，怎么安装？（一）

nnUNet&#xff0c;这个医学领域的分割巨无霸!在论文和比赛中随处可见他的身影。大家对于nnUNet v1版本的教程都赞不绝口&#xff0c;因为它简单易懂、详细全面&#xff0c;让很多朋友都轻松掌握了使用方法。 最近&#xff0c;我也抽出时间仔细研究了nnUNet v2&#xff0c;并全…...

编程日记 2023/9/4 3:59:31

iOS开发Swift-4-IBAction,group,音乐播放器-木琴App

1.使用素材创建木琴App的UI。 2.连接IBAction。 其余按钮直接拖拽到play里边。 当鼠标置于1处时2处显示如图&#xff0c;表示成功。当用户按下任一按钮都会触发play中的内容。 3.将7个按钮的View中的Tag值分别调为1、2、3、4、5、6、7. 4.将音频文件拖入项目文件中。 Create gr…...

编程日记 2023/9/4 3:58:31

【linux】pid 文件的作用ing

文章目录 一. pid文件简介1. pid 文件是什么2. 作用 二. pid文件的使用 一. pid文件简介 1. pid 文件是什么 打开系统(Linux) 的 “/var/run/” 目录可以看到有很多已 “.pid” 为结尾的文件&#xff0c;只有一行&#xff0c;它记录的是相应进程的 pid&#xff0c;即进程号。…...

编程日记 2023/9/4 3:57:28

K8s简介之什么是K8s

目录 1.概述 2.什么是容器引擎&#xff1f; 3.什么是容器 4.什么是容器编排&#xff1f; 5.容器编排工具 6.到底什么是K8s? 7.为什么市场推荐K8s 8.K8s架构 9.K8s组件 Pods API 服务器 调度器 控制器管理器 Etcd 节点 Kubelet Kube代理 Kubectl 1.概述 Kub…...

编程日记 2023/9/4 3:56:27

说说Flink双流join

分析&回答 Flink双流JOIN主要分为两大类 一类是基于原生State的Connect算子操作另一类是基于窗口的JOIN操作。其中基于窗口的JOIN可细分为window join和interval join两种。 基于原生State的Connect算子操作 实现原理&#xff1a;底层原理依赖Flink的State状态存储&…...

编程日记 2023/9/4 3:55:26

终极B站界面美化指南：如何用BewlyBewly插件快速打造个性化体验

终极B站界面美化指南&#xff1a;如何用BewlyBewly插件快速打造个性化体验 【免费下载链接】BewlyBewly Just make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話) 项目地址: https://gitcode.com/gh_mirrors/be/BewlyBewly …...

编程新知 2026/3/31 13:51:10

Overleaf项目本地化实战：用VS Code插件管理、Git版本控制，再搭配Copilot提效

Overleaf项目本地化实战&#xff1a;用VS Code插件管理、Git版本控制&#xff0c;再搭配Copilot提效 对于经常使用LaTeX撰写学术论文或技术文档的用户来说&#xff0c;Overleaf无疑是一个强大的云端协作平台。然而&#xff0c;当项目规模扩大、需要更精细的版本控制时&#xff…...

编程新知 2026/3/31 13:39:05

Android tinyalsa深度解析之pcm_params_get_period_size_max调用流程与实战(一百七十二)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》作者 博主新书推荐&#xff1a;《Android系统多媒体进阶实战》&#x1f680; Android Audio工程师专栏地址&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; Android多媒体专栏地址&a…...

编程新知 2026/3/31 11:39:18

10分钟搞定 Nginx 安装：Linux/Windows 双平台实测（附避坑指南）

一、前言上一篇我们初识了Nginx——知道了它是高性能的HTTP和反向代理服务器&#xff0c;懂了它为什么被99%的互联网公司青睐&#xff0c;也明确了我们后续的学习路线。本篇文章将手把手教你在Linux和Windows系统上&#xff0c;完成Nginx的安装、部署、启动、停止 &#xff0c;…...

编程新知 2026/3/31 11:27:13

终极指南：Redaxios参数序列化完全掌握，自定义查询字符串生成逻辑如此简单

终极指南&#xff1a;Redaxios参数序列化完全掌握&#xff0c;自定义查询字符串生成逻辑如此简单 【免费下载链接】redaxios The Axios API, as an 800 byte Fetch wrapper. 项目地址: https://gitcode.com/gh_mirrors/re/redaxios Redaxios是一个轻量级的Fetch封装库&a…...

编程新知 2026/3/31 10:32:45

抖音批量下载助手：轻松管理您的抖音视频资源库

抖音批量下载助手&#xff1a;轻松管理您的抖音视频资源库 【免费下载链接】douyinhelper 抖音批量下载助手 项目地址: https://gitcode.com/gh_mirrors/do/douyinhelper 还在为手动保存抖音视频而烦恼吗&#xff1f;抖音批量下载助手正是您需要的效率工具&#xff01;这…...

编程新知 2026/3/31 10:24:38

Qwen3-ASR-0.6B方言识别效果展示：粤语、四川话实测

Qwen3-ASR-0.6B方言识别效果展示&#xff1a;粤语、四川话实测 1. 引言 语音识别技术发展至今&#xff0c;已经能够很好地处理普通话和英语等主流语言&#xff0c;但方言识别一直是技术难点。不同地区的方言在发音、语调、词汇上都有很大差异&#xff0c;让机器准确识别并非易…...

编程新知 2026/3/31 9:46:14

小米智能家居与Home Assistant完美融合：打造高效智能家居生态

小米智能家居与Home Assistant完美融合&#xff1a;打造高效智能家居生态 【免费下载链接】ha_xiaomi_home Xiaomi Home Integration for Home Assistant 项目地址: https://gitcode.com/GitHub_Trending/ha/ha_xiaomi_home 小米智能家居Home Assistant集成是由小米官方…...

编程新知 2026/3/31 7:00:59

别再为发票报销发愁！用Python+EasyOFD库，5分钟搞定OFD转PDF/图片（附完整代码）

5分钟极速解决发票报销难题&#xff1a;PythonEasyOFD高效转换实战指南 每次月底报销时&#xff0c;面对邮箱里堆积如山的OFD格式电子发票&#xff0c;你是否也感到头疼&#xff1f;手动一张张下载、转换、打印不仅耗时耗力&#xff0c;还容易出错。今天我们就来彻底解决这个困…...

编程新知 2026/3/31 6:22:40

Simulink仿真速度太慢？试试用C Mex S函数给模型“提提速”

Simulink性能优化实战&#xff1a;用C Mex S函数突破仿真速度瓶颈 当Simulink模型运行缓慢时&#xff0c;工程师们常常陷入漫长的等待。本文将揭示如何通过C Mex S函数这一利器&#xff0c;将仿真速度提升10倍以上&#xff0c;特别适合处理复杂算法、图像处理和大规模系统仿真等…...

编程新知 2026/3/31 5:54:30