html加载页面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>算数模一体化</title>
</head><body><div class="content"><div class="loader JS_on"><span class="binary"></span><span class="binary"></span></div><span class="getting-there">当前模型训练【模型名称】加载中...</span><div class="progress-bar" id="myElement"></div></div><style>html,body {height: 100%;display: flex;align-items: center;justify-content: center;background: #2D4654;}.content {display: flex;flex-direction: column;justify-content: center;align-items: center;}.loader {width: 130px;height: 170px;position: relative;&::before,&::after {content: "";width: 0;height: 0;position: absolute;bottom: 30px;left: 15px;z-index: 1;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 20px solid #1b2a33;transform: scale(0);transition: all 0.2s ease;}&::after {border-right: 15px solid transparent;border-bottom: 20px solid #162229;}.binary {width: 100%;height: 140px;display: block;color: white;position: absolute;top: 0;left: 15px;z-index: 2;overflow: hidden;&::before,&::after {font-family: "Lato";font-size: 24px;position: absolute;top: 0;left: 0;opacity: 0;}&:nth-child(1) {&::before {content: "0";animation: a 1.1s linear infinite;}&::after {content: "0";animation: b 1.3s linear infinite;}}&:nth-child(2) {&::before {content: "1";animation: c 0.9s linear infinite;}&::after {content: "1";animation: d 0.7s linear infinite;}}}&.JS_on {&::before,&::after {transform: scale(1);}}}@keyframes a {0% {transform: translate(30px, 0) rotate(30deg);opacity: 0;}100% {transform: translate(30px, 150px) rotate(-50deg);opacity: 1;}}@keyframes b {0% {transform: translate(50px, 0) rotate(-40deg);opacity: 0;}100% {transform: translate(40px, 150px) rotate(80deg);opacity: 1;}}@keyframes c {0% {transform: translate(70px, 0) rotate(10deg);opacity: 0;}100% {transform: translate(60px, 150px) rotate(70deg);opacity: 1;}}@keyframes d {0% {transform: translate(30px, 0) rotate(-50deg);opacity: 0;}100% {transform: translate(45px, 150px) rotate(30deg);opacity: 1;}}.getting-there {text-align: center;font-family: "Lato";font-size: 16px;letter-spacing: 2px;color: white;}.progress-bar {background-color: #fff;width: 300px;height: 16px;box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.25);border-radius: 10px;position: relative;margin-top: 10px;}.progress-bar:after {content: "";background-color: rgb(66, 195, 247);position: absolute;border-radius: 10px;width: var(--after-width, 0%);height: 100%;top: 0px;left: 0px;}</style><script>function changeWidth() {const xhr = new XMLHttpRequest()xhr.open('get', '/xxx/abc', true)xhr.onload = function (data) {if (xhr.status === 200) {const data = JSON.parse(xhr.response)console.log(data)var element = document.getElementById('myElement');element.style.setProperty('--after-width', `50%`);}}xhr.send(JSON.stringify({}))}setInterval(function () {// location.reload();changeWidth()}, 2000)</script></div>
</body></html>相关文章：
html加载页面
<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>算数模一体化</title> </head><b…...
【数据可视化】Arcgis api4.x 热力图、时间动态热力图、timeSlider时间滑块控件应用 (超详细、附免费教学数据、收藏！)
1.效果 目录 1.效果 2.安装配置 3.热力图 4.TimeSlider滑块应用 4.1 时间滑块控件 4.2 添加控件 5.时间动态热力图 2.安装配置 这里不教大家如何在前端框架使用arcgis api。不过npm安装、css如何引入、教学数据存放与图层加载的教程，可以浏览我之前发的一篇文…...
WEB攻防-JavaWweb项目JWT身份攻击组件安全访问控制
知识点： 1、JavaWeb常见安全及代码逻辑； 2、目录遍历&身份验证&逻辑&JWT； 3、访问控制&安全组件&越权&三方组件； 演示案例： JavaWeb-WebGoat8靶场搭建使用 安全问题-目录遍历&身份认…...
【C++算法】模拟算法
替换所有的问号 题目链接 替换所有的问号https://leetcode.cn/problems/replace-all-s-to-avoid-consecutive-repeating-characters/description/ 算法原理 代码步骤 class Solution { public:string modifyString(string s) {int n s.size();for(int i 0; i < n; i){…...
模版进阶（template）
1.非类型模版参数 模版参数分类类型形参与非类型形参。 ① 类型形参：出现在在模板参数列表中，跟在class或者typename之类的参数类型名称。 ② 非类型形参，就是用一个常量作为类(函数)模板的一个参数，在类(函数)模板中可将该参数当…...
vue2与vue3的区别
1.v-if与v-for的优先级不同 2.vue2中存在数据更新以后视频不更新的问题，故存在$set来解决这一问题，而vue3中数据双向绑定不存在数据更新视图不更新的问题，所以也就没有this.$set...
借助大模型将文档转换为视频
利用传统手段将文档内容转换为视频，比如根据文档内容录制一个视频，不仅需要投入大量的时间和精力，而且往往需要具备专业的视频编辑技能。使用大模型技术可以更加有效且智能化地解决上述问题。本实践方案旨在依托大语言模型（Large …...
UE5安卓项目打包安装
Android studio安装 参考：https://docs.unrealengine.com/5.2/zh-CN/how-to-set-up-android-sdk-and-ndk-for-your-unreal-engine-development-environment/ 打开android studio的官网：Download Android Studio & App Tools - Android Developers …...
MSF的使用学习
一、更新MSF apt update # 更新安装包信息；只检查，不更新（已安装的软件包是否有可用的更新，给出汇总报告） apt upgrade # 更新已安装的软件包，不删除旧包； apt full-upgrade # 升级包&#x…...
C++ —— 关于vector
目录 链接 1. vector的定义 2. vector的构造 3. vector 的遍历 4. vector 的扩容机制 5. vector 的空间接口 5.1 resize 接口 5.2 push_back 5.3 insert 5.4 erase 5.5 流插入与流提取 vector 并不支持流插入与流提取，但是可以自己设计，更…...
设计模式——对象池模式
对象池模式 1. 概述2. 适用场景3. 原理4. 优点5. 缺点 示例代码示例代码使用示例 Java 标准库中的例子Apache Commons Pool 示例 1. 概述 对象池模式（Object Pool Pattern） 是一种用于管理和复用一组预先创建的对象的设计模式。它的主要目的是为了提高性…...
【VitualBox】VitualBox的网络模式+网络配置
VirtualBox 1. 简介 VirtualBox 是一款开源虚拟机软件，使用者可以在VirtualBox上安装并且执行Solaris、Windows、DOS、Linux、OS/2 Warp、BSD等系统作为客户端操作系统。 2. 六种网络接入模式 VirtualBox提供了多种网络接入模式，他们各有优缺点…...
「Netmarble 小镇」活动来了：踏上穿越标志性世界的旅程！
欢迎来到 Netmarble 小镇！本次活动从 9 月 13 日持续到 10 月 11 日，是你们体验 Netmarble 著名游戏世界最精彩内容的入口。在为期一个月的庆祝活动中，你们将体验到独家内容、惊险刺激的挑战和全新人物化身的发布！ 探索 Netmarble…...
MySQL 中的索引覆盖扫描：加速查询的秘密武器
在 MySQL 数据库的使用中，索引是提高查询性能的重要工具。而索引覆盖扫描（Index Covering Scan）更是一种能显著提升查询效率的技术。本篇文章我们就来深入了解一下 MySQL 中的索引覆盖扫描是什么。 一、什么是索引覆盖扫描 在 MySQL 中&…...
【机器学习】经典数据集鸢尾花的分类识别
【机器学习】经典数据集鸢尾花的分类识别 1、数据集介绍1.1 数据集详情 2、实验内容2.1 准备数据集2.2 创建颜色映射对象2.3 绘制特征散点图2.4 数据的归一化2.5 数据的标准化 3、实验截图提取萼片长度与萼片宽度分类提取萼片长度与花瓣长度分类提取萼片长度与花瓣宽度分类提取…...
Oracle从入门到放弃
Oracle从入门到放弃 左连接和右连接Where子查询单行子查询多行子查询 from子句的子查询select子句的子查询oracle分页序列序列的应用 索引PL/SQL变量声明与赋值select into 赋值变量属性类型 异常循环游标存储函数存储过程不带传出参数的存储过程带传出参数的存储过程 左连接和…...
学习笔记 - 知识图谱的符号表示方法
学习笔记 - 知识图谱的符号表示方法 说明： 首次发表日期：2024-09-13个人阅读学习并摘录成笔记 知识表示的相关名词定义 以下内容摘录自 Knowledge Graphs Applied 2.3小节，然后AI翻译人工润色。 实体（Entities）—表…...
探索RESTful风格的网络请求：构建高效、可维护的API接口【后端 20】
探索RESTful风格的网络请求：构建高效、可维护的API接口 在当今的软件开发领域，RESTful（Representational State Transfer）风格的网络请求已经成为构建Web服务和API接口的标配。RESTful风格以其简洁、无状态、可缓存以及分层系统等…...
【深度智能】：迈向高级时代的人工智能全景指南
前几天偶然发现了一个超棒的人工智能学习网站，内容通俗易懂，讲解风趣幽默，简直让人欲罢不能。忍不住分享给大家，人工智能立刻跳转，开启你的AI学习之旅吧！ 第一阶段：基础知识 1. 计算机科…...
unity3d入门教程七
unity3d入门教程七 17.1物理系统17.2静态刚体17.3刚体的碰撞17.4刚体的反弹18.1运动学刚体18.2碰撞检测18.3碰撞事件回调18.4目标的识别18.5碰撞的规避 17.1物理系统 在物理系统中的物体具有质量和速度的是刚体 不用写代码就会自由落体运动了 17.2静态刚体 给 ‘地面’ 添…...
苏州创新药20年，站上全球产业洗牌暴风眼
一个城市的创新药产业集群如何从无到有，又如何在全球化临界点寻找自己的位置。文｜徐鑫编｜任晓渔过去一年多，苏州是全球创新药产业版图中一个绕不过去的城市。大额海外授权交易频繁传出，在中国高端制造走出去的背景下&a…...
别再死记硬背Payload了！我用XSS-Game靶场，带你拆解18种过滤规则背后的绕过逻辑
从XSS-Game靶场实战中掌握18种过滤规则的逆向思维在网络安全领域，跨站脚本攻击（XSS）始终是Web应用面临的主要威胁之一。许多开发者虽然了解XSS的基本概念，但当面对各种复杂的过滤规则时，往往不知如何系统分析并构造有效…...
如何快速掌握开源UE资产编辑器：UAssetGUI完整配置与实战指南
如何快速掌握开源UE资产编辑器：UAssetGUI完整配置与实战指南 【免费下载链接】UAssetGUI A tool designed for low-level examination and modification of Unreal Engine game assets by hand. 项目地址: https://gitcode.com/gh_mirrors/ua/UAssetGUI UAss…...
Unity主题系统设计：状态驱动的主题抽象与自动注入方案
1. 这不是换个颜色那么简单：为什么Unity项目里“换肤”总在发布前夜崩盘？你有没有经历过这样的场景：美术同学凌晨两点发来一套新主题资源包，UI设计师说“这次配色更符合品牌调性”，产品说“上线前必须支持深色模式”&a…...
紧急预警：DeepSeek代码生成中未公开的3类逻辑漂移现象（附自动化检测脚本+修复模板）
更多请点击： https://intelliparadigm.com 第一章：紧急预警：DeepSeek代码生成中未公开的3类逻辑漂移现象（附自动化检测脚本修复模板） 近期在多轮生产级代码审计中发现，DeepSeek-R1（v2.5&#x…...
03 - 变量与数据类型
03 - 变量与数据类型 变量是编程里最基础的概念，相当于你往电脑里存东西的"容器"。这章我们把变量的命名规则、Python 的几种基本数据类型都过一遍。 变量是什么 说白了，变量就是一个有名字的盒子。你往里面放个东西，以后想用这个…...
输电线路在线监测系统｜架空线路安全运行的“第一道防线“！
输电线路微气象监测站是专为高压输电线路、电网廊道、杆塔运维量身打造的专利级一体化微气象智能监测设备。依托双专利超声波探测技术、六要素集成传感架构、无启动风速高精测量、智能抗干扰稳控系统，实现输电线路沿线气象24小时全自动捕捉、动态实时监测、大风风险…...
Burp抓包失败的五大隐形墙与HTTPS解密断裂点排查指南
1. 这不是Burp用得不对，是环境链路断在了你没看见的地方“Burp抓不到包”——这句话我过去三年里听开发、测试、刚转安全的新人说了不下两百遍。但真正打开Burp一看，Proxy标签页里空空如也，连个localhost:8080的请求都没有，十有八…...
终极虚拟显示器解决方案：ParsecVDisplay完整使用指南
终极虚拟显示器解决方案：ParsecVDisplay完整使用指南 【免费下载链接】parsec-vdd ✨ Perfect virtual display for game streaming 项目地址: https://gitcode.com/gh_mirrors/pa/parsec-vdd ParsecVDisplay是一个基于Parsec虚拟显示驱动(VDD)的独立应用程序…...
面试官问LinkedBlockingQueue和ArrayBlockingQueue区别？别只答有界无界了，这3个实战坑才是重点
面试官追问LinkedBlockingQueue与ArrayBlockingQueue？别只答基础区别，这3个实战陷阱才是关键 当面试官抛出"LinkedBlockingQueue和ArrayBlockingQueue有什么区别"这个问题时，80%的候选人会条件反射般回答"一个有界一个无界&qu…...