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

html+css+js实现Notification 通知

news 2026/5/13 3:52:13

实现效果：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Notification 通知</title><style>*{padding: 0;margin: 0;box-sizing: border-box;}.source{display: flex;margin-top: 50px;margin-left: 50px;width: 870px;height: 80px;padding: 24px;border: 1px solid #ecf5ff;}button{width: 110px;height:40px;margin-right: 20px;color: #606266;border: 1px solid #c0c4cc;background-color: #fff;border-radius: 3px;}button:hover{border: 1px solid #409eff;color:#409eff ;}button.active{border: 1px solid #409eff;color:#409eff ;}.modal-container {position: fixed;top: 20px;right: 20px;width: 330px;}.modal{width: 330px;border: 1px solid #c0c4cc;padding: 14px 24px 14px 18px;border-radius: 5px;margin-bottom: 14px;transform: translateX(350px);transition: transform 0.3s ease-in-out;}.open{transform: translateX(0);}.modal .header{display: flex;justify-content: space-between;font-weight: 700;font-size: 16px;color: #303133;padding-bottom: 5px;}i{cursor: pointer;font-style: normal;font-weight: 300;color: #606266;}.modal .footer{color: #606266;font-size: 14px;}</style>
</head>
<body><div class="source"><button class="close">可自动关闭</button><button class="unclose">不会自动关闭</button></div><div class="modal-container"><!-- 模态框将被动态添加到这个容器中 --><!-- <div class="modal"><div class="header">标题名称<i>X</i></div><div class="footer">这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案</div></div> --></div><script>// 1.Modal构造函数封装模态框function Modal(title='',message=''){// console.log(title,message);// 创建modal模态框盒子// 1.1创建div标签this.modalBox=document.createElement('div')// 1.2给div标签添加modal类this.modalBox.className='modal'// 1.3给modal盒子内部填充两个div标签this.modalBox.innerHTML=`<div class="header">${title} <i>X</i></div><div class="footer">${message} </div>`// console.log(this.modalBox);}new Modal('提示','这是一条不会自动关闭的消息')// 2.给构造函数原型对象身上挂载open方法Modal.prototype.open=function(){document.querySelector('.modal-container').append(this.modalBox);setTimeout(() => {this.modalBox.classList.add('open');}, 300);// 点击关闭this.closeBtn=this.modalBox.querySelector('.close-btn');this.modalBox.querySelector('i').addEventListener('click', () => {this.close();});}// close方法Modal.prototype.close=function(){this.modalBox.classList.remove('open');setTimeout(() => {this.modalBox.remove();}, 300); // 等待动画完成后移除元素}// 绑定点击事件document.querySelector('.close').addEventListener('click', function() {const modal = new Modal('标题名称','这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案');modal.open();// 设置模态框在3秒后自动关闭setTimeout(() => {modal.close();}, 3000);});document.querySelector('.unclose').addEventListener('click',function(){const unclose=new Modal('提示','这是一条不会自动关闭的消息')unclose.open()})</script>
</body>
</html>

 

相关文章：

html+css+js实现Notification 通知

实现效果&#xff1a; 代码实现&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Notif…...

编程日记 2024/10/26 0:35:27

【Linux】拆分详解 - 常见指令和权限理解

文章目录 前言一、常用指令1. 基本查看与路径跳转1.1文件与目录1.2 ls 指令&#xff08;显示文件&#xff09;1.3 pwd &#xff08;查看当前目录&#xff09;1.4 clear &#xff08;清屏&#xff09;1.5 whoami &#xff08;查看用户名&#xff09;1.6 cd&#xff08;跳转路径&…...

编程日记 2024/10/26 0:34:26

UniHttp 框架，请求http接口

项目案例下载地址： https://download.csdn.net/download/jinhuding/89902024 1.快速开始 2.1引入依赖 <dependency><groupId>io.github.burukeyou</groupId><artifactId>uniapi-http...

编程日记 2024/10/26 0:32:23

C++20中头文件ranges的使用

<ranges>是C20中新增加的头文件&#xff0c;提供了一组与范围(ranges)相关的功能&#xff0c;此头文件是ranges库的一部分。包括&#xff1a; 1.concepts: (1).std::ranges::range:指定类型为range&#xff0c;即它提供开始迭代器和结束标记(it provides a begin iterato…...

编程日记 2024/10/26 0:31:22

设计一个html+css+js的注册页，对于注册信息进行合法性检测

综合使用HTML、JavaScript和CSS进行注册页面设计&#xff0c;实现以下若干功能&#xff1a; 注意整个页面的色调和美观使用FramesetTable布局&#xff08;div也可&#xff09;对用户ID和用户名、口令不符合条件及时判断对口令不一致进行及时判断&#xff08;34的及时判断&#…...

编程日记 2024/10/26 0:30:20

语音识别——使用Vosk进行语音识别

文章目录 前言一、Vosk模型1.准备好所需要的语音包2.下载使用 二、使用示例1.文件读取示例2.结合麦克风演示 总结 前言 如何编译Vosk请参照之前的文章&#xff0c;ubuntu编译kaldi和vosk Vosk是语音识别开源框架&#xff0c;支持二十种语言 - 中文&#xff0c;英语&#xff0…...

编程日记 2024/10/26 0:29:19

element ui中el-image组件查看图片的坑

比如说上传组件使用el-image-viewer组件去看，如果用错了，你会发现，你每次只能看一张图片 <template><div><el-upload action="#" list-type="picture-card" :auto-upload="false" :file-list="fileList"@change=&qu…...

编程日记 2024/10/26 0:28:18

LabVIEW水质监测系统

在面对全球性的海洋污染问题时&#xff0c;利用先进技术进行水质监测成为了保护海洋环境的关键手段之一。开发了一种基于LabVIEW的海洋浮标水质监测系统&#xff0c;该系统能够实时监测并评估近海水域的水质状况&#xff0c;旨在为海洋保护和污染防治提供科技支持。 项目背景 …...

编程日记 2024/10/26 0:22:11

SpringMVC之 文件上传和下载

1. 文件上传 1.1 前端注意事项 文件上传操作&#xff0c;前端的表单项需要如下三项设置&#xff1a; &#xff08;1&#xff09;input标签的type属性应设置为file&#xff0c;并且注意不要在input标签中设置value属性&#xff0c;因为这可能导致文件上传不成功&#xff1b; …...

编程日记 2024/10/26 0:20:09

LeetCode Hot 100：二分查找

LeetCode Hot 100&#xff1a;二分查找 35. 搜索插入位置 思路 1&#xff1a;lower_bound class Solution { public:int searchInsert(vector<int>& nums, int target) {return lower_bound(nums.begin(), nums.end(), target) - nums.begin();} };思路 2&#xf…...

编程日记 2024/10/26 0:19:08

打包方式-jar和war的区别

1、jar包 JAR包是类的归档文件&#xff0c;与平台无关的文件格式&#xff0c;其实jar包就是java的类进行编译生成的class文件进行打包的压缩包。 JAR以ZIP文件格式为基础&#xff0c;与ZIP不同的是&#xff0c;JAR不仅用于压缩和发布&#xff0c;还用于部署和封装库、组件和插…...

编程日记 2024/10/26 0:17:06

【论文+源码】基于spring boot的垃圾分类网站

创建一个基于Spring Boot的垃圾分类网站涉及多个步骤&#xff0c;包括环境搭建、项目创建、数据库设计、后端服务开发、前端页面设计等。下面我将引导您完成这个过程。 第一步&#xff1a;准备环境 确保您的开发环境中安装了以下工具&#xff1a; Java JDK 8 或更高版本Mav…...

编程日记 2024/10/26 0:16:06

【C++ STL 模板类】pair 键值对

文章目录 【 1. pair 对象的创建 】【 2. pair 对象的赋值 】【 3. pair 对象的比较 】【 4. pair对象成员的互换】 C STL 标准库提供了 pair 类模板&#xff0c;专门用来将 2 个普通元素 first 和 second&#xff08;可以是 C 基本数据类型、结构体、类自定的类型&#xff09;…...

编程日记 2024/10/26 0:14:04

paddleocr使用FastDeploy 部署工具部署 rknn 模型

在 PC 端转换 pdmodel 模型为 rknn 模型和在板端使用百度飞浆开发的 FastDeploy 部署工具部署 rknn 模型 以下内容是在 PC 端系统为 Ubuntu20.04&#xff0c;板端系统为ubuntu20.04 的环境下实现的 描述&#xff1a; 官网地址 rknn_zoo RKNPU2_SDK …...

编程日记 2024/10/26 0:13:03

Apple Vision Pro市场表现分析：IDC最新数据揭示的真相

随着AR/VR技术逐渐成熟并被更多消费者接受，2024年第二季度（Q2）成为这一领域的一个重要转折点。根据国际数据公司（IDC）发布的最新报告，整个AR/VR市场在本季度经历了显著的增长。接下来，我们将深入探讨Apple Vision Pro在这股增长浪潮中的具体表现。 市场背景 2024年Q2，…...

编程日记 2024/10/26 0:10:01

Mybatis-04.入门-JDBC

一.JDBC 二.原始的JDBC程序代码 &#xff08;不做要求&#xff09; Test public void testJdbc() throws Exception {//1. 注册驱动Class.forName("com.mysql.cj.jdbc.Driver");//2. 获取连接对象String url "jdbc:mysql://localhost:3306/mybatis";Str…...

编程日记 2024/10/26 0:07:59

拥抱云开发的未来：腾讯云数据库、云模板与AI智能化的应用场景探索

本文目录&#xff1a; &#x1f4a1;前言&#xff1a;技术的边界在不断延展&#x1f31f;目录&#x1f308;什么是腾讯云云开发&#xff1f;&#x1f4be;云数据库&#xff1a;让数据成为开发的稳固基石&#x1f951;数据&#xff0c;不再只是数据 &#x1f6e0;云模板&#xf…...

编程日记 2024/10/26 0:05:56

新手铲屎官求推荐，噪音低的宠物空气净化器应该用哪款

当初选择养橘猫就是因为我听到有人说橘猫不容易掉毛才养的&#xff0c;谁知道养了之后和传闻中的不一样&#xff0c;真正的让我明白了什么叫“眼见为实”。 主要是猫掉毛就掉毛&#xff0c;只要我能清理的我都会清理&#xff0c;只要能保证养猫的同时还能保持家里卫生干净就行…...

编程日记 2024/10/26 0:03:54

玄机平台-应急响应-webshell查杀

首先xshell连接 然后进入/var/www/html目录中&#xff0c;将文件变成压缩包 cd /var/www/html tar -czvf web.tar.gz ./* 开启一个http.server服务&#xff0c;将文件下载到本地 python3 -m http.server 放在D盾中检测 基本可以确认木马文件就是这四个 /var/www/html/shell.p…...

编程日记 2024/10/26 0:02:53

LeetCode Hot 100：图论

LeetCode Hot 100&#xff1a;图论 200. 岛屿数量 思路 1&#xff1a;深度优先搜索 class Solution { private:const int dx[4] {-1, 0, 1, 0};const int dy[4] {0, 1, 0, -1};public:int numIslands(vector<vector<char>>& grid) {if (grid.empty())retu…...

编程日记 2024/10/26 0:00:48

AI智能体文化档案：用Next.js静态站点构建数字人类学观察站

1. 项目概述&#xff1a;一个观察AI智能体文化的数字档案馆最近在GitHub上闲逛&#xff0c;发现了一个让我眼前一亮的项目&#xff1a;The MoltStein Files。这可不是一个普通的代码仓库&#xff0c;而是一个专注于记录和存档AI智能体之间“社交”行为的数字档案馆。简单来说&a…...

编程新知 2026/5/13 2:47:01

FastAPI部署演进：从Gunicorn+Uvicorn镜像到原生多进程的迁移指南

1. 项目背景与演进&#xff1a;从“黄金搭档”到“历史遗产”如果你在过去几年里用 FastAPI 部署过 Web 服务&#xff0c;大概率听说过或者用过tiangolo/uvicorn-gunicorn-fastapi-docker这个 Docker 镜像。它一度是 FastAPI 官方文档里推荐的部署方案之一&#xff0c;由 FastA…...

编程新知 2026/5/13 2:19:31

抖音图片怎么去水印？2026实测去水印方法全整理，免费工具一并推荐

抖音图片怎么去水印&#xff1f;2026实测去水印方法全整理&#xff0c;免费工具一并推荐 每次在抖音刷到一张好看的图&#xff0c;长按保存下来却发现角落盖着一行"昵称抖音"水印&#xff0c;这种体验相信不少人都经历过。水印不影响欣赏还好&#xff0c;但如果想把图…...

编程新知 2026/5/13 1:03:10

AI赋能二进制安全：BinAIVulHunter项目实战与逆向工程集成

1. 项目概述与核心价值最近在安全圈里&#xff0c;一个名为BinAIVulHunter的开源项目引起了我的注意。这个项目名直译过来就是“二进制AI漏洞猎人”&#xff0c;光看名字就能猜到它的核心玩法&#xff1a;利用人工智能技术&#xff0c;来自动化分析二进制文件&#xff0c;挖掘其…...

编程新知 2026/5/13 0:53:01

三步高效配置：快速实现百度网盘直链下载的完整指南

三步高效配置&#xff1a;快速实现百度网盘直链下载的完整指南 【免费下载链接】baiduyun 油猴脚本 - 一个免费开源的网盘下载助手 项目地址: https://gitcode.com/gh_mirrors/ba/baiduyun 你是否还在为百度网盘下载速度缓慢而烦恼&#xff1f;是否厌倦了客户端限速的困…...

编程新知 2026/5/13 0:46:56

为 OpenClaw 配置 Taotoken 以实现自动化工作流中的模型调用

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为 OpenClaw 配置 Taotoken 以实现自动化工作流中的模型调用 OpenClaw 是一款强大的自动化工作流工具&#xff0c;能够通过编排任务…...

编程新知 2026/5/12 22:54:48

先进制程重塑晶圆代工格局：从HPC需求到供应链博弈

1. 行业现状&#xff1a;先进制程如何重塑晶圆代工格局最近和几位在芯片设计公司负责流片的朋友聊天&#xff0c;大家讨论最激烈的&#xff0c;除了产能紧张&#xff0c;就是到底要不要、以及何时上更先进的工艺节点。一个普遍的共识是&#xff1a;7纳米和5纳米这类所谓“先进制…...

编程新知 2026/5/12 22:37:32

在Windows上安装Android应用：APK Installer让跨平台操作变得简单

在Windows上安装Android应用&#xff1a;APK Installer让跨平台操作变得简单 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否想过在Windows电脑上直接运行Androi…...

编程新知 2026/5/12 19:56:58

基于Node.js与Telegraf构建支持双历法的Telegram天气机器人

1. 项目概述&#xff1a;一个功能完备的Telegram天气机器人 最近在做一个需要集成天气信息的小项目&#xff0c;顺手就把之前写的一个Telegram天气机器人翻新重构了一遍。这个机器人不只是简单地查询温度&#xff0c;它融合了实时天气、24小时预报&#xff0c;并且特别加入了波…...

编程新知 2026/5/12 18:50:18

正点原子 STM32MP257 同构多核架构下的 ADC 电压采集与处理应用开发实战

在嵌入式系统中&#xff0c;ADC模拟电压的读取是常见的需求。如何高效、并发、且可控地完成数据采集与处理&#xff1f;本篇文章通过双线程分别绑定在 Linux 系统的不同 CPU 核心上&#xff0c;采集 /sys/bus/iio 接口的 ADC 原始值与缩放系数 scale&#xff0c;并在另一个核上…...

编程新知 2026/5/12 18:46:14