HTML实战项目：高考加油和中考加油
设计思路
页面加载后会自动显示高考内容，点击顶部按钮可以切换到中考内容。倒计时会每秒更新，为考生提供实时的备考时间参考。
-
使用代表希望的蓝色和金色渐变作为主色调
-
顶部导航栏可切换高考/中考内容
-
添加动态倒计时功能
-
设计励志名言卡片和备考小贴士
-
添加动画效果增强视觉体验
-
确保移动端友好设计
-
下面是完整代码演示
-
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加油吧！学子们 - 高考中考加油</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #1a2980, #26d0ce);
color: #fff;
min-height: 100vh;
padding-bottom: 40px;
background-attachment: fixed;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 30px 0;
position: relative;
}
h1 {
font-size: 3.5rem;
margin-bottom: 10px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
background: linear-gradient(45deg, #ffd700, #ff8c00, #ff4500);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: titleGlow 2s infinite alternate;
}
@keyframes titleGlow {
0% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
100% { text-shadow: 0 0 20px rgba(255, 140, 0, 0.8), 0 0 30px rgba(255, 69, 0, 0.6); }
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 700px;
margin: 0 auto 30px;
line-height: 1.6;
}
.tabs {
display: flex;
justify-content: center;
margin-bottom: 40px;
flex-wrap: wrap;
}
.tab-btn {
background: rgba(255, 255, 255, 0.15);
border: none;
color: white;
padding: 15px 35px;
font-size: 1.2rem;
border-radius: 50px;
margin: 0 10px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.tab-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-3px);
}
.tab-btn.active {
background: linear-gradient(45deg, #ff8c00, #ffd700);
color: #1a2980;
font-weight: bold;
box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
}
.content-section {
display: none;
animation: fadeIn 0.8s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.content-section.active {
display: block;
}
.countdown {
background: rgba(0, 0, 0, 0.2);
border-radius: 20px;
padding: 30px;
margin: 30px auto;
max-width: 800px;
text-align: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.countdown-title {
font-size: 1.8rem;
margin-bottom: 25px;
color: #ffd700;
}
.timer {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.timer-box {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px 15px;
min-width: 120px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.timer-box:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.2);
}
.timer-value {
font-size: 3.5rem;
font-weight: bold;
color: #ffd700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.timer-label {
font-size: 1.1rem;
margin-top: 10px;
opacity: 0.8;
}
.motivational-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin: 40px 0;
}
.card {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 30px;
text-align: center;
transition: all 0.4s ease;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.card i {
font-size: 3.5rem;
color: #ffd700;
margin-bottom: 20px;
}
.card h3 {
font-size: 1.8rem;
margin-bottom: 15px;
color: #ffd700;
}
.card p {
line-height: 1.8;
font-size: 1.1rem;
}
.quote {
font-style: italic;
margin-top: 15px;
padding: 15px;
border-left: 3px solid #ffd700;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 10px 10px 0;
}
.tips-section {
background: rgba(0, 0, 0, 0.2);
border-radius: 20px;
padding: 40px;
margin: 50px 0;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.section-title {
text-align: center;
font-size: 2.2rem;
margin-bottom: 30px;
color: #ffd700;
}
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.tip-item {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 25px;
display: flex;
align-items: flex-start;
gap: 15px;
}
.tip-item i {
color: #ffd700;
font-size: 1.8rem;
min-width: 40px;
padding-top: 5px;
}
.tip-content h4 {
font-size: 1.4rem;
margin-bottom: 10px;
color: #ffd700;
}
.encouragement {
text-align: center;
padding: 50px 20px;
font-size: 2.2rem;
font-weight: bold;
margin: 40px 0;
background: linear-gradient(45deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.2));
border-radius: 20px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
footer {
text-align: center;
padding: 30px;
margin-top: 40px;
font-size: 1.1rem;
opacity: 0.8;
}
/* 响应式设计 */
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
.tab-btn {
padding: 12px 25px;
font-size: 1rem;
margin-bottom: 10px;
}
.timer-box {
min-width: 80px;
padding: 15px 10px;
}
.timer-value {
font-size: 2.2rem;
}
.encouragement {
font-size: 1.6rem;
padding: 30px 15px;
}
.tips-section {
padding: 25px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 2rem;
}
.timer-box {
min-width: 70px;
}
.timer-value {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-graduation-cap"></i> 高考加油 & 中考加油</h1>
<p class="subtitle">青春无悔，奋斗最美！无论高考还是中考，都是人生的重要里程碑。愿你以梦为马，不负韶华，全力以赴，创造属于自己的辉煌！</p>
<div class="tabs">
<button class="tab-btn active" data-tab="gaokao">高考加油</button>
<button class="tab-btn" data-tab="zhongkao">中考加油</button>
</div>
</header>
<!-- 高考内容部分 -->
<section id="gaokao-content" class="content-section active">
<div class="countdown">
<h2 class="countdown-title">2025年高考倒计时</h2>
<div class="timer">
<div class="timer-box">
<div class="timer-value" id="days-gaokao">365</div>
<div class="timer-label">天</div>
</div>
<div class="timer-box">
<div class="timer-value" id="hours-gaokao">00</div>
<div class="timer-label">小时</div>
</div>
<div class="timer-box">
<div class="timer-value" id="minutes-gaokao">00</div>
<div class="timer-label">分钟</div>
</div>
<div class="timer-box">
<div class="timer-value" id="seconds-gaokao">00</div>
<div class="timer-label">秒钟</div>
</div>
</div>
</div>
<div class="motivational-section">
<div class="card">
<i class="fas fa-brain"></i>
<h3>智慧备考</h3>
<p>科学规划时间，掌握核心考点，理解重于记忆。制定合理的复习计划，注重知识体系的构建。</p>
<p class="quote">"博观而约取，厚积而薄发。" — 苏轼</p>
</div>
<div class="card">
<i class="fas fa-heart"></i>
<h3>心态调整</h3>
<p>保持平和心态，相信自己的努力。适度的压力是动力，过度的焦虑是阻力。学会放松，保持自信。</p>
<p class="quote">"非淡泊无以明志，非宁静无以致远。" — 诸葛亮</p>
</div>
<div class="card">
<i class="fas fa-running"></i>
<h3>坚持到底</h3>
<p>高考是场马拉松，坚持到最后才是胜利。每天进步一点点，积少成多，终将迎来质的飞跃。</p>
<p class="quote">"路漫漫其修远兮，吾将上下而求索。" — 屈原</p>
</div>
</div>
<div class="encouragement">
乾坤未定，你我皆是黑马！高考必胜！
</div>
<div class="tips-section">
<h2 class="section-title">高考备考小贴士</h2>
<div class="tips-grid">
<div class="tip-item">
<i class="fas fa-book"></i>
<div class="tip-content">
<h4>回归基础</h4>
<p>最后阶段要回归课本，巩固基础知识，确保基础题不丢分。</p>
</div>
</div>
<div class="tip-item">
<i class="fas fa-clock"></i>
<div class="tip-content">
<h4>时间管理</h4>
<p>模拟真实考试环境进行限时训练，提高答题速度和准确率。</p>
</div>
</div>
<div class="tip-item">
<i class="fas fa-utensils"></i>
<div class="tip-content">
<h4>健康饮食</h4>
<p>保持均衡饮食，多吃蔬菜水果，适量补充蛋白质，避免油腻食物。</p>
</div>
</div>
<div class="tip-item">
<i class="fas fa-bed"></i>
<div class="tip-content">
<h4>规律作息</h4>
<p>调整生物钟，保证充足睡眠，确保考试时段精力充沛。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 中考内容部分 -->
<section id="zhongkao-content" class="content-section">
<div class="countdown">
<h2 class="countdown-title">2025年中考倒计时</h2>
<div class="timer">
<div class="timer-box">
<div class="timer-value" id="days-zhongkao">120</div>
<div class="timer-label">天</div>
</div>
<div class="timer-box">
<div class="timer-value" id="hours-zhongkao">00</div>
<div class="timer-label">小时</div>
</div>
<div class="timer-box">
<div class="timer-value" id="minutes-zhongkao">00</div>
<div class="timer-label">分钟</div>
</div>
<div class="timer-box">
<div class="timer-value" id="seconds-zhongkao">00</div>
<div class="timer-label">秒钟</div>
</div>
</div>
</div>
<div class="motivational-section">
<div class="card">
<i class="fas fa-lightbulb"></i>
<h3>高效学习</h3>
<p>掌握学习方法比死记硬背更重要。学会总结归纳，建立知识网络，提高学习效率。</p>
<p class="quote">"学而不思则罔，思而不学则殆。" — 孔子</p>
</div>
<div class="card">
<i class="fas fa-balance-scale"></i>
<h3>均衡发展</h3>
<p>不要偏科，各科均衡发展才能取得理想成绩。合理安排各科复习时间，扬长补短。</p>
<p class="quote">"不积跬步，无以至千里；不积小流，无以成江海。" — 荀子</p>
</div>
<div class="card">
<i class="fas fa-users"></i>
<h3>团队协作</h3>
<p>与同学组成学习小组，互相讨论、互相提问，共同进步。分享学习心得，解决疑难问题。</p>
<p class="quote">"独学而无友，则孤陋而寡闻。" — 《礼记》</p>
</div>
</div>
<div class="encouragement">
今日拼搏努力，他朝谁与争锋！中考加油！
</div>
<div class="tips-section">
<h2 class="section-title">中考备考小贴士</h2>
<div class="tips-grid">
<div class="tip-item">
<i class="fas fa-pencil-alt"></i>
<div class="tip-content">
<h4>规范答题</h4>
<p>注意答题规范，书写工整，步骤清晰，避免不必要的扣分。</p>
</div>
</div>
<div class="tip-item">
<i class="fas fa-redo"></i>
<div class="tip-content">
<h4>错题整理</h4>
<p>建立错题本，定期回顾，分析错误原因，避免重复犯错。</p>
</div>
</div>
<div class="tip-item">
<i class="fas fa-dumbbell"></i>
<div class="tip-content">
<h4>适度运动</h4>
<p>每天保持适量运动，如散步、慢跑等，缓解压力，增强体质。</p>
</div>
</div>
<div class="tip-item">
<i class="fas fa-mobile-alt"></i>
<div class="tip-content">
<h4>减少干扰</h4>
<p>学习时远离手机等电子设备，创造安静的学习环境，提高专注力。</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>© 2025 加油吧！学子们 | 高考中考加油专题</p>
<p>愿每一位学子都能发挥最佳水平，实现心中梦想！</p>
</footer>
</div>
<script>
// 切换标签页
document.querySelectorAll('.tab-btn').forEach(button => {
button.addEventListener('click', () => {
// 更新按钮状态
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('active');
});
button.classList.add('active');
// 显示对应内容
const tabId = button.getAttribute('data-tab');
document.querySelectorAll('.content-section').forEach(section => {
section.classList.remove('active');
});
document.getElementById(`${tabId}-content`).classList.add('active');
});
});
// 倒计时函数
function updateCountdown(targetDate, daysId, hoursId, minutesId, secondsId) {
const now = new Date().getTime();
const distance = targetDate - now;
if (distance < 0) {
// 考试已结束
document.getElementById(daysId).textContent = "0";
document.getElementById(hoursId).textContent = "0";
document.getElementById(minutesId).textContent = "0";
document.getElementById(secondsId).textContent = "0";
return;
}
// 计算天、时、分、秒
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 更新显示
document.getElementById(daysId).textContent = days;
document.getElementById(hoursId).textContent = hours.toString().padStart(2, '0');
document.getElementById(minutesId).textContent = minutes.toString().padStart(2, '0');
document.getElementById(secondsId).textContent = seconds.toString().padStart(2, '0');
}
// 设置高考日期 (2025年6月7日)
const gaokaoDate = new Date("June 7, 2025 09:00:00").getTime();
// 设置中考日期 (2025年6月20日)
const zhongkaoDate = new Date("June 20, 2025 09:00:00").getTime();
// 初始化倒计时
updateCountdown(gaokaoDate, "days-gaokao", "hours-gaokao", "minutes-gaokao", "seconds-gaokao");
updateCountdown(zhongkaoDate, "days-zhongkao", "hours-zhongkao", "minutes-zhongkao", "seconds-zhongkao");
// 每秒更新一次倒计时
setInterval(() => {
updateCountdown(gaokaoDate, "days-gaokao", "hours-gaokao", "minutes-gaokao", "seconds-gaokao");
updateCountdown(zhongkaoDate, "days-zhongkao", "hours-zhongkao", "minutes-zhongkao", "seconds-zhongkao");
}, 1000);
// 添加卡片悬停效果
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-10px)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
});
});
</script>
</body>
</html> -
功能亮点
-
双主题设计：通过标签页切换高考和中高考内容
-
动态倒计时：
-
高考倒计时（2025年6月7日）
-
中考倒计时（2025年6月20日）
-
-
励志内容：
-
三个激励卡片（智慧备考、心态调整、坚持到底）
-
备考小贴士板块
-
鼓舞人心的名言名句
-
-
视觉设计：
-
蓝金色渐变主题，象征希望与成功
-
卡片悬停动画效果
-
标题发光动画
-
响应式设计，适配各种设备
-
-
交互体验：
-
平滑的标签切换动画
-
卡片悬停效果
-
动态更新的倒计时
-
最后希望所有高考生和中考生旗开得胜，拔得头魁
-
相关文章：
HTML实战项目：高考加油和中考加油
设计思路 页面加载后会自动显示高考内容，点击顶部按钮可以切换到中考内容。倒计时会每秒更新，为考生提供实时的备考时间参考。 使用代表希望的蓝色和金色渐变作为主色调 顶部导航栏可切换高考/中考内容 添加动态倒计时功能 设计励志名言卡片和备考小贴…...
Rk3568驱动开发_设备树点亮LED_11
代码： #include <linux/module.h> #include <linux/kernel.h> #include <linux/init.h> #include <linux/fs.h> #include <linux/slab.h> #include <linux/uaccess.h> #include <linux/io.h> #include <linux/cdev.h…...
多功能文档处理工具推荐
软件介绍 今天为大家介绍一款功能强大的文档编辑工具坤Tools，这是一款在吾爱论坛广受好评的办公软件。 软件背景 坤Tools是由吾爱论坛用户分享的软件，在论坛软件榜单上长期位居前列，获得了用户的一致好评。 软件性质 这是一款完全离线、…...
如何科学测量系统的最高QPS？
要准确测量系统的最高QPS（Queries Per Second），既不能简单依赖固定请求数（如2万次），也不能盲目压到服务器崩溃。以下是专业的方法论和步骤： 1. 核心原则 目标：找到系统在稳定运行&a…...
ORM 框架的优缺点分析
ORM 框架的优缺点分析 一、ORM 框架概述 ORM(Object-Relational Mapping)是一种将关系型数据库与面向对象编程进行映射的技术框架。它通过将数据库表映射为编程语言中的类，将记录映射为对象，将字段映射为属性，实现了用面向对象的方式操作数据库。 核心价值：ORM 在数据库和…...
【目标检测】【ICCV 2021】条件式DETR实现快速训练收敛
Conditional DETR for Fast Training Convergence 条件式DETR实现快速训练收敛 代码链接 论文链接 摘要 最近提出的DETR方法将Transformer编码器-解码器架构应用于目标检测领域，并取得了显著性能。本文针对其训练收敛速度慢这一关键问题，提出了一种条…...
【工作笔记】 WSL开启报错
【工作笔记】 WSL开启报错 时间：2025年5月30日16:50:42 1.现象 Installing, this may take a few minutes... WslRegisterDistribution failed with error: 0x80370114 Error: 0x80370114 ??????????????????Press any key to continue......
VMware使用时出现的问题，此文章会不断更新分享使用过程中会出现的问题
VMware使用时出现的问题，此文章会不断更新分享使用过程中会出现的问题 一、VMware安装后没有虚拟网卡，VMnet1，VMnet8显示黄色三角警告 此文章会不断更新，分享VMware使用过程中出现的问题 如果没找到你的问题可以私信我 一、VMware…...
UniApp微信小程序自定义导航栏实现
UniApp微信小程序自定义导航栏 在UniApp开发微信小程序时，页面左上角默认有一个返回按钮（在导航栏左侧），但有时我们需要自定义这个按钮的样式和功能，同时保持与导航栏中间的标题和右侧胶囊按钮（药丸屏&…...
【Ubuntu】Ubuntu网络管理
Ubuntu 网络管理 ubuntu/debian 中的网络管理 NetworkManager,使用nmcli查询与操作网络配置 /run/NetworkManager/no-stub-resolv.conf 对应命令行例子: nmcli device showsystemd-networkd,使用netplan的yaml文件来配置网络 /usr/lib/systemd/systemd-networkdsystemd-resol…...
)
GitHub 趋势日报 (2025年05月27日)
本日报由 TrendForge 系统生成 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日整体趋势 Top 10 排名项目名称项目描述今日获星总星数语言1Fosowl/agenticSeek完全本地的马努斯AI。没有API，没有200美元的每…...
VR视角下，浙西南革命的热血重生
VR 浙西南革命项目依托先进的 VR 技术，为浙西南革命历史的展示开辟了一条全新的道路 ，打破了时间与空间的限制，使革命历史变得触手可及。 （一）沉浸式体验革命场景 借助 VR 技术，在 VR 浙西南革命的展示…...
深入解析Kafka JVM堆内存：优化策略与监控实践
💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐：「storms…...
【高级终端Termux】在安卓手机/平板上使用Termux 搭建 Debian 环境并运行 PC 级 Linux 应用教程（含安装WPS,VS Code）
Termux 搭建 Debian 环境并运行 PC 级 Linux 应用教程 一、前言 1. 背景 众所周知，最新搭载澎湃OS和鸿蒙OS的平板都内置了PC级WPS，办公效率直接拉满（板子终于从“泡面盖”升级为“生产力”了）。但问题来了：如果不是这…...
基于BERT-Prompt的领域句子向量训练方法
基于BERT-Prompt的领域句子向量训练方法 一、核心原理：基于BERT-Prompt的领域句子向量训练方法 论文提出一种结合提示学习（Prompt Learning）和BERT的领域句子向量训练方法，旨在解决装备保障领域文本的语义表示问题。核心原理如下： 以下通过具体例子解释传统词向量方法和…...
高频面试--redis
Reids 1. 常见的数据结构（string, list, hash, set, zset） 答法模板： Redis 提供五种核心数据结构： String：最基本的类型，支持整数、自增、自减、位操作。 List：双端链表，支持消息…...
CRMEB 单商户Java版 v2.3公测版发布，欢迎体验！
当商城管理后台一成不变时，你是否也有过换换风格的想法？ 当商城流量激增时，你是否也希望随时观察服务器负载状况，确保系统稳定运行？ CRMEB单商户Java版v2.3公测版发布，更新200管理后台页面、弹窗…...
 本地YARN集群的部署)
(四) 本地YARN集群的部署
一、部署说明 Hadoop YARN分布式资源调度，会启动： ResourceManager进程作为管理节点NodeManager进程作为工作节点ProxyServer、JobHistoryServer这两个辅助节点 二、配置文件 在 $HADOOP_HOME/etc/hadoop 文件夹内，修改： 1.m…...
华为OD机试真题——求最多可以派出多少支队伍（2025A卷：100分）Java/python/JavaScript/C/C++/GO最佳实现
2025 A卷 100分 题型 本专栏内全部题目均提供Java、python、JavaScript、C、C++、GO六种语言的最佳实现方式； 并且每种语言均涵盖详细的问题分析、解题思路、代码实现、代码详解、3个测试用例以及综合分析； 本文收录于专栏：《2025华为OD真题目录+全流程解析+备考攻略+经验分…...
《软件工程》第 12 章 - 软件测试
软件测试是确保软件质量的关键环节，它通过执行程序来发现错误，验证软件是否满足需求。本章将依据目录，结合 Java 代码示例、可视化图表，深入讲解软件测试的概念、过程、方法及实践。 12.1 软件测试的概念 12.1.1 软件测试的任务 …...
消息队列-kafka为例
目录 消息队列应用场景和基础知识MQ常见的应用场景MQ消息队列的两种消息模式如何保证消息队列的高可用？如何保证消息不丢失？如何保证消息不被重复消费？如何保证消息消费的幂等性？重复消费的原因解决方案 如何保证消息被消费的顺序…...
学习STC51单片机20（芯片为STC89C52RCRC）
每日一言 生活不会一帆风顺，但你的勇敢能让风浪变成风景。 串口助手的界面就等于是pc端的页面设置的是pc端的波特率等等参数 程序里面的是单片机的波特率等等参数 串口助手是 PC 端软件 串口助手（如 STC-ISP）是运行在 PC 上的工具&#x…...
链路追踪神器zipkin安装详细教程教程
今天分享下zipkin的详细安装教程，具体代码demo可以参考我上篇文章：Spring Cloud Sleuth与Zipkin深度整合指南：微服务链路追踪实战-CSDN博客 一、Zipkin是什么？ Zipkin是由Twitter开源的一款分布式追踪系统（现由OpenZ…...
RabbitMQ备份与恢复技术详解：策略、工具与最佳实践
RabbitMQ作为广泛使用的消息中间件，其高可用性和数据持久化能力使其成为分布式系统的核心组件。然而，硬件故障、人为误操作或灾难性事件仍可能导致数据丢失或服务中断。因此，建立可靠的备份与恢复机制是运维工作的关键环节。本文基于RabbitMQ…...
bug: uniCloud 查询数组字段失败
问题根源：使用了支付宝云 官方说：2024年11月之后创建的新的支付宝云空间，数组字段查询强制必须设置 array 类型的索引 布尔类型的查询，强制必须设置 bool 类型的索引。 方案一：找到云服务空间-》云数据库-》对应的表-…...
Php JIT 使用详解
简介 PHP 8 引入的 JIT（Just-In-Time 编译器） 是该版本的一个重要性能特性，首次让 PHP 有了运行时即时编译的能力，从解释型语言迈向了“编译执行”的方向。 什么是 JIT？ JIT 是 即时编译（Just-In-Time c…...
视觉分析开发范例：Puppeteer截图＋计算机视觉动态定位
一、选型背景：传统爬虫已无力应对的视觉挑战 在现代互联网环境中，尤其是小红书、抖音、B站等视觉驱动型平台，传统基于 HTML 的爬虫已经难以满足精准数据采集需求： 内容加载由 JS 动态触发，难以直接解析 HTML…...
Linux 基础开发工具的使用
目录 前言 一：下载工具yum 二：文本编辑器vim 1. 命令模式 2. 插入模式 3. 底行模式 三：gcc和g 基本使用格式 常用选项及作用 编译过程示例 四、Linux 项目自动化构建工具 ——make/Makefile 1. make 与 Makefile 的关系 2. Make…...
ElasticSearch查询指定时间内出现的次数/2秒内出现的次数
查询指定时间内出现的次数 POST process-log/_search {"size": 0,"query": {"bool": {"filter": [{"range": {"requestTime": {"from": 1722470400000,"to": 1722556800000}}}]}},"agg…...
华为云Flexus+DeepSeek征文 | Dify-LLM平台一键部署教程及问题解决指南
作者简介 我是摘星，一名专注于云计算和AI技术的开发者。本次通过华为云MaaS平台体验DeepSeek系列模型，将实际使用经验分享给大家，希望能帮助开发者快速掌握华为云AI服务的核心能力。 目录 1. 前言 2. 准备工作 2.1 注册华为云账号 2.2 确…...