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

纯手写模态框、消息弹框、呼吸灯

news 2025/9/22 16:22:58

在有些做某些网页中，应用不想引用一些前端框架，对于一些比较常用的插件可以纯手写实现

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()">&times;</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…...

编程日记 2023/11/14 6:02:52

windows安装composer并更换国内镜像

第一步、官网下载下载地址 Composer安装https://getcomposer.org/Composer-Setup.exe第二步、双击安装即可第三步选择 php安装路径并配置path 第四步、 composer -v查看安装是否成功，出现成功界面第五步、查看镜像地址并更换（composer国内可能较慢…...

编程日记 2023/11/14 6:01:51

c++ basic_string 和string区别

在C中，basic_string 是一个模板类，而 string 是 basic_string 的一个具体实例化，即 basic_string<char>。basic_string 模板类被设计为支持多种字符类型，而 string 是其中一种特定字符类型的字符串类。具体来说&#xff0…...

编程日记 2023/11/14 6:00:50

怎么在uni-app中使用Vuex 简单demo，通俗易懂(第二篇)

Vuex是Vue.js的官方状态管理库，可以帮助我们更好地管理和维护复杂状态和数据共享。在Vuex中，整个应用的状态被集中到一个单一的状态树中，这个状态树包含了所有的共享状态和数据。通过状态管理模块、getter、mutation、action等机制&#xff0…...

编程日记 2023/11/14 5:59:49

相机专业模型详解，各个参数作用，专业模式英文全称和缩写

ISO（感光度） 全称： International Organization for Standardization缩写： ISO Shutter Speed（快门速度） 全称： Shutter Speed缩写： SS Aperture（光圈大小） 全…...

编程日记 2023/11/14 5:58:48

将随机数设成3407，让你的深度学习模型再涨一个点！文再附3种随机数设定方法

随机数重要性深度学习已经在计算机视觉领域取得了巨大的成功，但我们是否曾想过为什么同样的模型在不同的训练过程中会有不同的表现？为什么使用同样的代码，就是和别人得到的结果不一样？怎么样才能保证自己每次跑同一个实验得到的…...

编程日记 2023/11/14 5:57:48

Spring后端HttpClient实现微信小程序登录

这是微信官方提供的时序图。我们需要关注的是前后端的交互，以及服务端如何收发网络请求。小程序端封装基本网络请求我们先封装一个基本的网络请求。 const baseUrl"localhost:8080" export default{sendRequsetAsync } /* e url：目标页…...

编程日记 2023/11/14 5:56:47

Linux下部署MySQL-MHA环境

目前的环境如下：centos7 有四台虚拟机，20，21，22，23 20为master，21，22，23 为20的从库，21 为管理节点。搭建MySQL主从复制的，可以参考我之前的文章 MHA&#…...

编程日记 2023/11/14 5:55:46

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…...

编程日记 2023/11/14 5:54:45

【UE5】虚拟制片教程

目录效果步骤一、下载素材二、将视频转成PNG序列三、开始虚拟制片效果步骤一、下载素材首先下载绿幕视频素材链接：百度网盘请输入提取码提取码：jyfk 二、将视频转成PNG序列打开“Adobe Premiere Pro”，导入素材 …...

编程日记 2023/11/14 5:53:44

集成Line、Facebook、Twitter、Google、微信、QQ、微博、支付宝的三方登录sdk

下载地址： https://githubfast.com/anerg2046/sns_auth 安装方式建议使用composer进行安装如果linux执行composer不方便的话，可以在本地新建个文件夹，然后执行上面的composer命令，把代码sdk和composer文件一起上传到项目适当位…...

编程日记 2023/11/14 5:52:43

2022年09月 Python（五级）真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试（1~6级）全部真题・点这里一、单选题（共25题，每题2分，共50分）第1题已知字符串：s=“语文,数学,英语”，执行print(s.split(“,”))语句后结果是？（） A: [‘语文’, ‘数学’, ‘英语’] B: [语文, 数学, 英语] C: [‘语文, 数学, 英语’] D: [‘语…...

编程日记 2023/11/14 5:51:42

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≤…...

编程日记 2023/11/14 5:50:41

Js 保留关键字

JavaScript 关键字用于标识要执行的操作，和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用；这些关键字有些在目前的版本中可能没有使用，但在以后 JavaScript 扩展中会用到。以下是JS中最重要的保留关键字&#xf…...

编程日记 2023/11/14 5:49:40

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技术可行性：…...

编程日记 2023/11/14 5:48:39

【系统架构设计】架构核心知识： 3.5 Redis和ORM

目录一 Redis 1 Redis与MemCache 2 Redis分布式存储方案 3 Redis集群切片的方式 4 Redis数据分片...

编程日记 2023/11/14 5:47:38

linux时间同步

搭建集群时，都会先设置时间同步，否则会出现多种问题。方式一： 1.安装ntp软件 yum install -y ntp 2.更新时区删除原有时区：sudo rm -f /etc/localtime 加载新时区：sudo ln -s /usr/share/zoneinfo/Asia/Shangh…...

编程日记 2023/11/14 5:46:36

mysql++库connected与ping方法的区别

mysql库connected与ping方法的区别前段时间开发公司代码的时候，我写了一个多线程调用数据库的函数，每个线程都是要连接数据库的，为了防止在查找数据之前，线程连接数据库断开，我使用定时器每20s检测一下线程连接数据库…...

编程日记 2023/11/14 5:45:36

拆位线段树 E. XOR on Segment

Problem - E - Codeforces 区间求和，区间异或的操作跟线段树的区间求和、区间相见相似，考虑用线段树。发现数组初始值最多是1e6，有不到25位，可以知道异或最大值是这些位数全是1的情况。发现可以对每一位进行运算就和。我们开…...

编程日记 2023/11/14 5:44:35

JVM及其垃圾回收机制（GC)

目录一.JVM内存区域划分二.JVM类加载机制类加载过程类加载的时机双亲委派模型三.JVM垃圾回收机制（GC) GC工作过程 1.找到垃圾/判断垃圾 （1）引用计数【python/PHP】 （2）可达性分析【Java】 2.对象释放…...

编程日记 2023/11/14 5:43:34

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文｜魏琳华编｜王一粟一场大会，聚集了中国多模态大模型的“半壁江山”。智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...

编程新知 2025/9/19 5:15:11

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/9/22 4:45:47

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据准备一个容器,例如: …...

编程新知 2025/8/30 16:47:37