纯手写 模态框、消息弹框、呼吸灯
在有些做某些网页中，应用不想引用一些前端框架，对于一些比较常用的插件可以纯手写实现
1、模态框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Water Ripple Effect</title>
<style>.modal-container {display: none;position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.4);}.modal-content {background-color: #fefefe;margin: 15% auto;padding: 20px;border: 1px solid #888;width: 80%;max-width: 600px;}.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;cursor: pointer;}.close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}.modal-btn {background-color: #4caf50;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;}</style>
</head>
<body><button id="open-modal-btn" onclick="openModal()">打开模态框</button><div id="modal-container" class="modal-container"><div class="modal-content"><span class="close" onclick="closeModal()">×</span><h2>模态框标题</h2><p>模态框的内容在这里。</p><button class="modal-btn" onclick="closeModal()">关闭</button></div></div><script>function openModal() {document.getElementById("modal-container").style.display = "block";
}function closeModal() {document.getElementById("modal-container").style.display = "none";
}</script>
</body>
</html>2、呼吸灯
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Water Ripple Effect</title>
<style>body {background-color: #000;}.ripple {margin: auto;margin-top: 5rem;width: 1rem;height: 1rem;border-radius: 50%;position:relative;animation: ripple 3s linear infinite;}.ripple::before,.ripple::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius: 50%;animation:inherit;animation-delay:1s;}.ripple::after {animation-delay:2s;}@keyframes ripple {0% {box-shadow: 0 0 0 .3rem var(--ripple-color);}100% {box-shadow: 0 0 0 8rem rgba(255,255,255, 0);}}
</style>
</head>
<body><div class="ripple" style="--ripple-color: rgba(255,0,0, 0.2); background-color: red;"></div><div class="ripple" style="--ripple-color: rgba(0,255,0, 0.2); background-color: green;"></div><div class="ripple" style="--ripple-color: rgba(0,0,255, 0.2); background-color: blue;"></div><div class="ripple" style="--ripple-color: rgba(255,255,0, 0.2); background-color: yellow;"></div>
</body>
</html>3、消息弹框
<!DOCTYPE html>
<html>
<head><title>消息弹框示例</title><style>.message-box {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #fff;padding: 10px;border: 1px solid blue;border-radius: 5px;}</style>
</head>
<body><button onclick="showMessage()">显示消息</button><script>// 创建一个函数来显示消息弹框function showMessage() {var equipment_name = '设备XXX';// 创建一个新的元素来显示消息var messageElement = document.createElement('div');messageElement.textContent = equipment_name + '没有生产数据！';messageElement.classList.add('message-box');// 将消息元素添加到页面的body中document.body.appendChild(messageElement);// 设置一个定时器，在一定时间后移除消息元素setTimeout(function() {document.body.removeChild(messageElement);}, 3000); // 3秒后移除消息元素}</script>
</body>
</html>4、跳转页
<html>
<head><meta charset="UTF-8"><title>跳转页面</title><style>body {background-color: #f4f4f4;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {text-align: center;padding: 20px;background-color: #fff;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.message {font-size: 24px;margin-bottom: 20px;}.countdown {font-size: 48px;font-weight: bold;margin-bottom: 20px;}.redirect {font-size: 18px;}.redirect a {color: #007bff;text-decoration: none;}.btn>a {display: inline-block;padding: 10px 20px;background-color: #007bff;color: #fff;text-decoration: none;border-radius: 5px;transition: background-color 0.3s ease;}.btn>a:hover {background-color: #0056b3;}</style>
</head>
<body><div class="container"><div class="message">该网站已迁移</div><div class="countdown" id="countdown">3</div><div class="redirect">马上跳转到 <a href="http://10.10.101.97:8079">http://10.10.101.97:8079</a></div></br><div class="btn"><a href="http://10.10.101.97:8079">点击这里立即跳转</a></div></div><script>// 倒计时跳转函数function countdown() {var countdownElement = document.getElementById('countdown');var countdownValue = parseInt(countdownElement.innerText);if (countdownValue > 0) {countdownElement.innerText = countdownValue - 1;setTimeout(countdown, 1000); // 每秒更新倒计时} else {window.location.href = 'http://10.10.101.97:8079'; // 跳转到指定网址}}// 页面加载时开始倒计时window.onload = function() {setTimeout(countdown, 1000);};</script>
</body>
</html>相关文章：
纯手写 模态框、消息弹框、呼吸灯
在有些做某些网页中，应用不想引用一些前端框架，对于一些比较常用的插件可以纯手写实现 1、模态框 <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>Water Ripple Effect</title> <style…...
windows安装composer并更换国内镜像
第一步、官网下载 下载地址 Composer安装https://getcomposer.org/Composer-Setup.exe第二步、双击安装即可 第三步选择 php安装路径并配置path 第四步、 composer -v查看安装是否成功，出现成功界面 第五步、查看镜像地址并更换（composer国内可能较慢…...
c++ basic_string 和string区别
在C中，basic_string 是一个模板类，而 string 是 basic_string 的一个具体实例化，即 basic_string<char>。basic_string 模板类被设计为支持多种字符类型，而 string 是其中一种特定字符类型的字符串类。 具体来说࿰…...
)
怎么在uni-app中使用Vuex 简单demo，通俗易懂(第二篇)
Vuex是Vue.js的官方状态管理库，可以帮助我们更好地管理和维护复杂状态和数据共享。在Vuex中，整个应用的状态被集中到一个单一的状态树中，这个状态树包含了所有的共享状态和数据。通过状态管理模块、getter、mutation、action等机制࿰…...
相机专业模型详解，各个参数作用，专业模式英文全称和缩写
ISO（感光度） 全称： International Organization for Standardization缩写： ISO Shutter Speed（快门速度） 全称： Shutter Speed缩写： SS Aperture（光圈大小） 全…...
将随机数设成3407，让你的深度学习模型再涨一个点！文再附3种随机数设定方法
随机数重要性 深度学习已经在计算机视觉领域取得了巨大的成功，但我们是否曾想过为什么同样的模型在不同的训练过程中会有不同的表现？为什么使用同样的代码，就是和别人得到的结果不一样？怎么样才能保证自己每次跑同一个实验得到的…...
Spring后端HttpClient实现微信小程序登录
这是微信官方提供的时序图。我们需要关注的是前后端的交互，以及服务端如何收发网络请求。 小程序端 封装基本网络请求 我们先封装一个基本的网络请求。 const baseUrl"localhost:8080" export default{sendRequsetAsync } /* e url：目标页…...
Linux下部署MySQL-MHA环境
目前的环境如下：centos7 有四台虚拟机，20，21，22，23 20为master，21，22，23 为20的从库，21 为管理节点。 搭建MySQL主从复制的，可以参考我之前的文章 MHA&#…...
DaoWiki（基于Django）开发笔记 20231114-阿里云mysql外部访问
文章目录 创建mysql用户，用户远程访问配置阿里云安全策略下载安装mysql workbench 创建mysql用户，用户远程访问 创建用户 CREATE USER dao_wiki% IDENTIFIED BY password;授权访问dao_wiki数据库 GRANT ALL PRIVILEGES ON dao_wiki.* TO dao_wiki%; F…...
【UE5】 虚拟制片教程
目录 效果 步骤 一、下载素材 二、将视频转成PNG序列 三、开始虚拟制片 效果 步骤 一、下载素材 首先下载绿幕视频素材 链接：百度网盘 请输入提取码 提取码：jyfk 二、将视频转成PNG序列 打开“Adobe Premiere Pro”，导入素材 …...
集成Line、Facebook、Twitter、Google、微信、QQ、微博、支付宝的三方登录sdk
下载地址： https://githubfast.com/anerg2046/sns_auth 安装方式建议使用composer进行安装 如果linux执行composer不方便的话，可以在本地新建个文件夹，然后执行上面的composer命令，把代码sdk和composer文件一起上传到项目适当位…...
2022年09月 Python（五级）真题解析#中国电子学会#全国青少年软件编程等级考试
Python等级考试（1~6级）全部真题・点这里 一、单选题（共25题，每题2分，共50分） 第1题 已知字符串：s=“语文,数学,英语”，执行print(s.split(“,”))语句后结果是？（ ） A: [‘语文’, ‘数学’, ‘英语’] B: [语文, 数学, 英语] C: [‘语文, 数学, 英语’] D: [‘语…...
C. Number of Pairs
time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standard output You are given an array a� of n� integers. Find the number of pairs (i,j)(�,�) (1≤i<j≤n1≤…...
Js 保留关键字
JavaScript 关键字用于标识要执行的操作，和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用；这些关键字有些在目前的版本中可能没有使用，但在以后 JavaScript 扩展中会用到。 以下是JS中最重要的保留关键字…...
nodejs+vue＋python＋PHP＋微信小程序-安卓-房产中介管理信息系统的设计与实现-计算机毕业设计
目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性：…...
【系统架构设计】架构核心知识： 3.5 Redis和ORM
目录 一 Redis 1 Redis与MemCache 2 Redis分布式存储方案 3 Redis集群切片的方式 4 Redis数据分片...
linux时间同步
搭建集群时，都会先设置时间同步，否则会出现多种问题。 方式一： 1.安装ntp软件 yum install -y ntp 2.更新时区 删除原有时区：sudo rm -f /etc/localtime 加载新时区：sudo ln -s /usr/share/zoneinfo/Asia/Shangh…...
mysql++库connected与ping方法的区别
mysql库connected与ping方法的区别 前段时间开发公司代码的时候，我写了一个多线程调用数据库的函数，每个线程都是要连接数据库的，为了防止在查找数据之前，线程连接数据库断开，我使用定时器每20s检测一下线程连接数据库…...
拆位线段树 E. XOR on Segment
Problem - E - Codeforces 区间求和，区间异或的操作跟线段树的区间求和、区间相见相似，考虑用线段树。 发现数组初始值最多是1e6，有不到25位，可以知道异或最大值是这些位数全是1的情况。 发现可以对每一位进行运算就和。 我们开…...
JVM及其垃圾回收机制（GC)
目录 一.JVM内存区域划分 二.JVM类加载机制 类加载过程 类加载的时机 双亲委派模型 三.JVM垃圾回收机制（GC) GC工作过程 1.找到垃圾/判断垃圾 （1）引用计数【python/PHP】 （2）可达性分析【Java】 2.对象释放…...
低成本数据标注：OpenClaw+Phi-3-vision-128k-instruct半自动化标记工具
低成本数据标注：OpenClawPhi-3-vision-128k-instruct半自动化标记工具 1. 为什么我们需要半自动化数据标注 在计算机视觉项目中，数据标注往往是耗时最长、成本最高的环节。我曾经参与过一个商品识别项目，团队3个人花了整整两周时间才完成50…...
2026年，探秘义乌一次性包装盒定做厂家的独特工艺与优质服务！
在商品包装需求日益多样化的今天，一次性包装盒的定制市场愈发繁荣。义乌，作为全球知名的小商品之都，拥有众多一次性包装盒定做厂家，它们以独特的工艺和优质的服务在市场中占据一席之地。今天，我们将走进一家具有代表性…...
判断当前页面是否以「添加到主屏幕」应用形态启动 （快捷方式\APP、套壳包等启动）
这里写自定义目录标题判断当前页面是否以「添加到主屏幕」应用形态启动判断当前页面是否以「添加到主屏幕」应用形态启动 /*** 判断当前页面是否以「添加到主屏幕」应用形态启动* - iOS Safari: navigator.standalone* - 标准 PWA: display-mode 为 standalone/fullscreen/min…...
从零开始掌握小红书数据采集：xhs库的5大实战应用场景
从零开始掌握小红书数据采集：xhs库的5大实战应用场景 【免费下载链接】xhs 基于小红书 Web 端进行的请求封装。https://reajason.github.io/xhs/ 项目地址: https://gitcode.com/gh_mirrors/xh/xhs 你是否曾经想过如何批量获取小红书上的热门内容？…...
drm_gpusvm 与 drm_pagemap 执行顺序分析
概述 在 SVM（Shared Virtual Memory）实现中，drm_gpusvm 和 drm_pagemap 分属两个不同的抽象层，协同完成 GPU 对进程虚拟地址空间的共享访问。两者的执行顺序并非固定的"先底层后上层"，而是根据操作场景有不同…...
Spring AI 助力 Java 开发者构建全功能 AI 智能体
【导语：随着人工智能的迅速发展，Java 开发者在将 AI 能力集成到基于 Spring 的应用程序方面选择有限。Spring AI 的出现改变了这一局面，本文详细介绍了如何使用 Spring AI 构建基于 Java 的全功能 AI 智能体。】Spring AI 打破 Java 集成 AI …...
Pixel Dream Workshop应用场景：像素游戏测试用占位图（placeholder）批量生成
Pixel Dream Workshop应用场景：像素游戏测试用占位图批量生成 1. 像素游戏开发中的占位图挑战 在独立游戏开发过程中，美术资源往往是开发进度的瓶颈之一。特别是对于像素风格的游戏项目，开发者经常面临一个两难选择： 等待专业美…...
基于粒子群算法（PSO）的宽带消色差超透镜Matlab核心程序探秘
基于粒子群算法PSO宽带消色差超透镜matlab核心程序有注释便于理解代码的含义，包含FDTD仿真，文章复现案例讲解，适合学习几何相位和传输相位，消色差效果很好可以对代码进行优化在光学领域，宽带消色差超透镜是一个热门的研…...
开发提效新思路：用快马平台打造你的个性化qoderwork代码片段工厂
今天想和大家分享一个提升前端开发效率的实用思路 - 用InsCode(快马)平台打造自己的代码片段工厂。作为一个经常需要重复编写UI组件的前端开发者，我发现这个方案能显著减少重复劳动。 痛点分析 每次新项目都要从零开始写导航栏、页脚这些基础组件特别浪费时间。虽然…...
彻底卸载Windows 10 OneDrive：开源脚本的完整解决方案
彻底卸载Windows 10 OneDrive：开源脚本的完整解决方案 【免费下载链接】OneDrive-Uninstaller Batch script to completely uninstall OneDrive in Windows 10 项目地址: https://gitcode.com/gh_mirrors/on/OneDrive-Uninstaller 你是否曾为Windows 10内置的…...