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

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

news 2025/10/22 14:38:29

效果：

 

 代码：

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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/10/20 17:25:53

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/10/21 19:09:22

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/10/19 17:19:35

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/10/3 22:08:23

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/10/21 23:40:19

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/10/21 6:07:47

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/10/16 13:27:06

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2025/10/9 1:51:24

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

编程新知 2025/10/2 19:46:59