html+css+js实现Notification 通知
实现效果：
代码实现：
<!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 通知
实现效果： 代码实现： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Notif…...
【Linux】拆分详解 - 常见指令和权限理解
文章目录 前言一、常用指令1. 基本查看与路径跳转1.1文件与目录1.2 ls 指令（显示文件）1.3 pwd （查看当前目录）1.4 clear （清屏）1.5 whoami （查看用户名）1.6 cd（跳转路径&…...
UniHttp 框架，请求http接口
项目案例下载地址： https://download.csdn.net/download/jinhuding/89902024 1.快速开始 2.1引入依赖 <dependency><groupId>io.github.burukeyou</groupId><artifactId>uniapi-http...
C++20中头文件ranges的使用
<ranges>是C20中新增加的头文件，提供了一组与范围(ranges)相关的功能，此头文件是ranges库的一部分。包括： 1.concepts: (1).std::ranges::range:指定类型为range，即它提供开始迭代器和结束标记(it provides a begin iterato…...
设计一个html+css+js的注册页，对于注册信息进行合法性检测
综合使用HTML、JavaScript和CSS进行注册页面设计，实现以下若干功能： 注意整个页面的色调和美观使用FramesetTable布局（div也可）对用户ID和用户名、口令不符合条件及时判断对口令不一致进行及时判断（34的及时判断&#…...
语音识别——使用Vosk进行语音识别
文章目录 前言一、Vosk模型1.准备好所需要的语音包2.下载使用 二、使用示例1.文件读取示例2.结合麦克风演示 总结 前言 如何编译Vosk请参照之前的文章，ubuntu编译kaldi和vosk Vosk是语音识别开源框架，支持二十种语言 - 中文，英语࿰…...
element ui中el-image组件查看图片的坑
比如说上传组件使用el-image-viewer组件去看，如果用错了，你会发现，你每次只能看一张图片 <template><div><el-upload action="#" list-type="picture-card" :auto-upload="false" :file-list="fileList"@change=&qu…...
LabVIEW水质监测系统
在面对全球性的海洋污染问题时，利用先进技术进行水质监测成为了保护海洋环境的关键手段之一。开发了一种基于LabVIEW的海洋浮标水质监测系统，该系统能够实时监测并评估近海水域的水质状况，旨在为海洋保护和污染防治提供科技支持。 项目背景 …...
SpringMVC之 文件上传和下载
1. 文件上传 1.1 前端注意事项 文件上传操作，前端的表单项需要如下三项设置： （1）input标签的type属性应设置为file，并且注意不要在input标签中设置value属性，因为这可能导致文件上传不成功； …...
LeetCode Hot 100：二分查找
LeetCode Hot 100：二分查找 35. 搜索插入位置 思路 1：lower_bound class Solution { public:int searchInsert(vector<int>& nums, int target) {return lower_bound(nums.begin(), nums.end(), target) - nums.begin();} };思路 2…...
打包方式-jar和war的区别
1、jar包 JAR包是类的归档文件，与平台无关的文件格式，其实jar包就是java的类进行编译生成的class文件进行打包的压缩包。 JAR以ZIP文件格式为基础，与ZIP不同的是，JAR不仅用于压缩和发布，还用于部署和封装库、组件和插…...
【论文+源码】基于spring boot的垃圾分类网站
创建一个基于Spring Boot的垃圾分类网站涉及多个步骤，包括环境搭建、项目创建、数据库设计、后端服务开发、前端页面设计等。下面我将引导您完成这个过程。 第一步：准备环境 确保您的开发环境中安装了以下工具： Java JDK 8 或更高版本Mav…...
【C++ STL 模板类】pair 键值对
文章目录 【 1. pair 对象的创建 】【 2. pair 对象的赋值 】【 3. pair 对象的比较 】【 4. pair对象成员的互换】 C STL 标准库提供了 pair 类模板，专门用来将 2 个普通元素 first 和 second（可以是 C 基本数据类型、结构体、类自定的类型）…...
paddleocr使用FastDeploy 部署工具部署 rknn 模型
在 PC 端转换 pdmodel 模型为 rknn 模型和在板端使用百度飞浆开发的 FastDeploy 部署工具部署 rknn 模型 以下内容是在 PC 端系统为 Ubuntu20.04，板端系统为ubuntu20.04 的环境下实现的 描述： 官网地址 rknn_zoo RKNPU2_SDK …...
Apple Vision Pro市场表现分析：IDC最新数据揭示的真相
随着AR/VR技术逐渐成熟并被更多消费者接受，2024年第二季度（Q2）成为这一领域的一个重要转折点。根据国际数据公司（IDC）发布的最新报告，整个AR/VR市场在本季度经历了显著的增长。接下来，我们将深入探讨Apple Vision Pro在这股增长浪潮中的具体表现。 市场背景 2024年Q2，…...
Mybatis-04.入门-JDBC
一.JDBC 二.原始的JDBC程序代码 （不做要求） Test public void testJdbc() throws Exception {//1. 注册驱动Class.forName("com.mysql.cj.jdbc.Driver");//2. 获取连接对象String url "jdbc:mysql://localhost:3306/mybatis";Str…...
拥抱云开发的未来：腾讯云数据库、云模板与AI智能化的应用场景探索
本文目录： 💡前言：技术的边界在不断延展🌟目录🌈什么是腾讯云云开发？💾云数据库：让数据成为开发的稳固基石🥑数据，不再只是数据 🛠云模板…...
新手铲屎官求推荐，噪音低的宠物空气净化器应该用哪款
当初选择养橘猫就是因为我听到有人说橘猫不容易掉毛才养的，谁知道养了之后和传闻中的不一样，真正的让我明白了什么叫“眼见为实”。 主要是猫掉毛就掉毛，只要我能清理的我都会清理，只要能保证养猫的同时还能保持家里卫生干净就行…...
玄机平台-应急响应-webshell查杀
首先xshell连接 然后进入/var/www/html目录中，将文件变成压缩包 cd /var/www/html tar -czvf web.tar.gz ./* 开启一个http.server服务，将文件下载到本地 python3 -m http.server 放在D盾中检测 基本可以确认木马文件就是这四个 /var/www/html/shell.p…...
LeetCode Hot 100：图论
LeetCode Hot 100：图论 200. 岛屿数量 思路 1：深度优先搜索 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…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
: K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？)
云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？
大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...
golang循环变量捕获问题
在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景 看这个代码片段： fo…...
Python如何给视频添加音频和字幕
在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。 环境准备 在开始之前，需要安装以下Python库：…...
第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...