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

【零基础JavaScript入门 | Day7】三大交互案例深度解析｜从DOM操作到组件化开发

news 来源：原创 2025/7/27 23:59:40

🌟今日知识图谱：
✅ 事件驱动编程 → 按钮交互与定时器控制
✅ 组件化思维 → 可复用UI模块开发
✅ 用户体验优化 → 动画与状态反馈设计
✅ 工程化实践 → 代码组织与维护技巧

案例一：课堂点名小助手

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;}.qs {width: 450px;height: 40px;color: red;}.btns {text-align: center;}.btns button {width: 100px;height: 35px;margin: 0 40px;}</style>
</head><body><h2>随机点名</h2><div class="box"><span>名字是：</span><div class="qs">这里显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>const arr = ['张三', '李四', '王五', '赵六', '田七', '王八', '陈九', '韩十']// 获取对象const qs = document.querySelector('.qs')const start = document.querySelector('.start')// 定时器的全局变量let n = null// 声明全局变量let random = null//添加点击事件start.addEventListener('click', function () {n = setInterval(function () {const random = Math.floor(Math.random() * arr.length)qs.innerHTML = arr[random]}, 100)// 如果数组里面只剩一个，不需要抽取if (arr.length === 1) {start.disabled = trueend.disabled = true}})// 关闭点击模块const end = document.querySelector('.end')end.addEventListener('click', function () {clearInterval(n)arr.splice(random, 1)console.log(arr)})</script>
</body></html>

🔍 功能升级建议：

音效增强：添加点击音效(audio.play())
动画效果：名字滚动时添加CSS旋转动画
数据持久化：localStorage保存剩余名单

案例二：智能搜索提示框

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>小米搜索框练习模板</title><style>/* 容器样式 */.search-box {margin: 100px auto;width: 500px;text-align: center;}/* 搜索容器（包含输入框和图标的父元素） */.search-container {position: relative;display: inline-block;}/* 默认输入框样式 */.search-input {width: 100px;/* 默认宽度 */height: 35px;padding: 0 30px;border: 1px solid #e0e0e0;border-radius: 17px;outline: none;transition: all 0.3s;/* 添加过渡动画 */}/* 搜索图标样式 */.search-icon {position: absolute;left: 10px;top: 50%;transform: translateY(-50%);width: 18px;height: 18px;background: url('data:image/svg+xml;utf8,<svg fill="#999999" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M945.066667 898.133333l-147.2-147.2c44.8-32 83.2-72.533333 108.8-121.6 34.133333-57.6 51.2-121.6 51.2-185.6 0-164.266667-134.4-300.8-300.8-300.8-166.4 0-300.8 134.4-300.8 300.8s134.4 300.8 300.8 300.8c61.866667 0 123.733333-19.2 174.933333-53.333333 44.8-32 83.2-72.533333 108.8-121.6l147.2 147.2c6.4 6.4 14.933333 8.533333 23.466667 8.533333s17.066667-2.133333 23.466666-8.533333c10.666667-12.8 10.666667-34.133333-2.133333-46.933334zM460.8 742.4c-151.466667 0-275.2-123.733333-275.2-275.2s123.733333-275.2 275.2-275.2 275.2 123.733333 275.2 275.2-123.733333 275.2-275.2 275.2z"/></svg>');pointer-events: none;}.result-list {display: none;list-style: none;padding: 0;margin: 0;position: absolute;top: 100%;left: 0;width: 100%;background-color: #fff;border: 1px solid #ccc;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.result-list a {text-decoration: none;color: #333;display: block;padding: 5px;border-bottom: 1px solid #ccc;cursor: pointer;}.result-list a:hover {background-color: #f0f0f0;}</style>
</head><body><!-- 搜索框结构 --><div class="search-box"><div class="search-container"><!-- 输入框 --><input type="text" class="search-input" placeholder="搜索内容"><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">小米15</a></li><li><a href="#">小米14</a></li><li><a href="#">红米k60</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米15ultra</a></li><li><a href="#">小米14pro</a></li></ul></div></div><script>// 获取元素const input = document.querySelector('.search-input');const ul = document.querySelector('.result-list');const searchContainer = document.querySelector('.search-container');// 监听事件，获得焦点input.addEventListener('focus', function () {ul.style.display = 'block';})// 监听事件，失去焦点input.addEventListener('blur', function () {ul.style.display = 'none';})</script>
</body></html>

✨ 新增功能模块：

热门搜索标签：展示本周Top5搜索词
历史记录：自动保存最近10条搜索记录
键盘导航：方向键选择建议项

案例三：交互式轮播组件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 240px;height: 450px;overflow: hidden;}.slider-poster {width: 100%;height: 320px;}.slider-poster img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-poster"><img src="./images/p1.jpg" alt="" /></div><div class="slider-footer"><p>魔法石</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1. 初始数据const pData = [{ url: './images/p1.jpg', title: '魔法石', color: 'rgb(36, 156, 200)' },{ url: './images/p2.jpg', title: '密室', color: 'rgb(43, 35, 26)' },{ url: './images/p3.jpg', title: '阿兹卡班的囚徒', color: 'rgb(36, 31, 33)' },{ url: './images/p4.jpg', title: '火焰杯', color: 'rgb(45, 110, 113)' },{ url: './images/p5.jpg', title: '凤凰社', color: 'rgb(67, 90, 92)' },{ url: './images/p6.jpg', title: '死亡圣器（上）', color: 'rgb(7, 66, 73)' },{ url: './images/p7.jpg', title: '死亡圣器（下）', color: 'rgb(53, 29, 25)' },]// 获取对象const img = document.querySelector('.slider-poster img')const footer = document.querySelector('.slider-footer')const p = document.querySelector('.slider-footer p')const next = document.querySelector('.next')let i = 0next.addEventListener('click', function () {i++if (i === pData.length) {i = 0}img.src = pData[i].urlfooter.style.backgroundColor = pData[i].colorp.innerHTML = pData[i].titledocument.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')})const prev = document.querySelector('.prev')prev.addEventListener('click', function () {i--if (i <= -1) {i = 6}common()})function common() {img.src = pData[i].urlfooter.style.backgroundColor = pData[i].colorp.innerHTML = pData[i].titledocument.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}// 自动播放let n = setInterval(function () {next.click()}, 1000)// 鼠标经过盒子时，停止播放const slider = document.querySelector('.slider')slider.addEventListener('mouseenter', function () {clearInterval(n)})// 鼠标离开盒子时，继续播放slider.addEventListener('mouseleave', function () {n = setInterval(function () {next.click()}, 1000)})</script></body></html>

🚀 企业级优化：

无限循环模式：克隆首尾元素实现无缝滚动

🎯 共性优化策略

优化方向	案例一	案例二	案例三
代码结构	减少全局变量	模块化封装	类组件化
用户体验	添加加载动画	输入防抖	滑动过渡
功能扩展	名单导入导出	搜索联想	缩略图导航

📌 注意事项：

所有修改需保持原始HTML结构
优先使用textContent替代innerHTML防XSS攻击
定时器务必及时清理（clearInterval）

【零基础JavaScript入门 | Day7】三大交互案例深度解析｜从DOM操作到组件化开发

【零基础JavaScript入门 | Day7】三大交互案例深度解析｜从DOM操作到组件化开发 🌟今日知识图谱： ✅ 事件驱动编程 → 按钮交互与定时器控制 ✅ 组件化思维 → 可复用UI模块开发 ✅ 用户体验优化 → 动画与状态反馈设计 ✅ 工程化实践 → 代码…...

编程日记 2025/7/27 23:59:40

[BalticOI 2009] Radio Transmission 无线传输

题目来自洛谷网站： KMP思路： 结论：n - ne[n] 模拟样例，如下图所示： 代码： #include<bits/stdc.h> #define int long long using namespace std; const int N 1e620;int n; char s[N]; int ne[N];…...

编程日记 2025/7/27 23:54:04

SvelteKit 最新中文文档教程（10）—— 部署 Cloudflare Pages 和 Cloudflare Workers

前言 Svelte，一个语法简洁、入门容易，面向未来的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1： Svelte …...

编程日记 2025/7/23 17:06:13

32位汇编：MASM32环境搭建与汇编窗口程序

引言 “汇编语言”是计算机底层的编程语言，直接操作硬件资源。32位汇编相比16位汇编在寄存器宽度、内存寻址和指令集等方面有了显著提升。本文将带你从零开始搭建32位汇编开发环境，并编写第一个窗口程序。 1. 环境搭建 1.1 下载MASM32 MASM32是一个专门…...

编程日记 2025/7/27 23:55:29

如何在 `php-fpm` 启动后自动运行自定义命令

如何在 php-fpm 启动后自动运行自定义命令在使用 php-fpm 时，有时需要在 php-fpm 启动后自动运行一些自定义命令，例如启动一个 Web 应用程序。本文将详细介绍如何通过 systemd 的 ExecStartPost 指令实现这一功能，并记录解决过程中遇到的问…...

编程日记 2025/7/26 8:19:45

26考研——图_图的代码实操（6）

408答疑文章目录五、图的代码实操图的存储邻接矩阵结构定义初始化插入顶点获取顶点位置在顶点 v1 和 v2 之间插入边获取第一个邻接顶点获取下一个邻接顶点显示图邻接表结构定义初始化图插入顶点获取顶点位置在顶点 v1 和 v2 之间插入边获取第一个邻接顶点获取下一个邻接顶点…...

编程日记 2025/7/24 15:11:58

栈资源释放示例

import java.util.EmptyStackException; /** * 栈资源释放示例类 * 栈资源在编程中通常指两种概念：1) 内存中的调用栈空间（存储方法调用和局部变量），由系统自动管理 * 2) 自定义的栈数据结构（如链表实现的栈对象&…...

编程日记 2025/7/27 1:24:31

【Qt 01】cmake搭建Qt VS2019开发环境

文章目录准备第一步：安装Qt5 库第二步：编写CMakeLists.txt第三步：编写批处理文件其他配置Qt VS Toolsqt 源码调试配置疑问初始的.ui, .qrc文件如何生成？ 准备编码：vscode debug: vs2019 Qt vs Tools 插件 c包管理…...

编程日记 2025/7/21 9:04:42

余弦退火算法与学习率预热

余弦退火算法与学习率预热总述： （1）标准余弦退火算法（Cosine Annealing）是通过单次的余弦曲线调整学习率，在一个周期内让学习率从一个最大值平滑下降η_max到最小值η_min，这种调整模式是非周…...

编程日记 2025/7/23 1:16:26

ref vs reactive，watch vs watchEffect的区别与使用场景

一、ref 与 reactive 的核心区别使用场景 ref:处理基本数据类型；需要重新赋值对象（如从api获取新数据） reactive：处理复杂的嵌套对象或者数组，不需要整体替换，直接访问属性（避免频繁写.value&…...

编程日记 2025/7/27 23:52:01

SQLark SQL编辑器秘籍，编写高效SQL查询

SQLark 是一款功能强大的数据库开发和管理工具，用于快速查询、创建和管理不同类型的数据库系统，支持达梦、Oracle 和 MySQL 数据库。SQLark内置的 SQL 编辑器，基于语法解析，集成智能提示、实时语法检查及语法高亮等功能&#xff0…...

编程日记 2025/7/27 23:57:34

LLM之RAG实战（五十二）| 如何使用混合搜索优化RAG 检索

在RAG项目中，大模型生成的参考内容（专业术语称为块）来自前一步的检索，检索的内容在很大程度上直接决定了生成的效果，因此检索对于RAG项目至关重要，最常用的检索方法是关键字搜索和语义搜索。本文将分别介绍…...

编程日记 2025/7/23 11:11:56

如何基于ios部署Deep Seek？

在 iOS 上部署深度学习模型（如 DeepSeek 或其他自定义模型）通常需要将模型转换为 iOS 支持的格式（如 Core ML），并通过代码集成到应用中。以下是详细步骤： 1. 准备模型模型训练确保你的模型已训练完成&…...

编程日记 2025/7/27 1:44:05

spring security 使用的过滤器还是拦截器

spring security 使用的过滤器还是拦截器 Spring Security 是一个强大的安全框架，用于保护 Java 应用程序。它主要使用过滤器（Filters）来实现安全功能，而不是拦截器（Interceptors）。不过，它也提…...

编程日记 2025/7/27 23:56:08

新四化驱动，如何构建智能汽车的“全场景”可进化互联网络？

在智能化、电动化、网联化、共享化的时代浪潮中，汽车正从单纯的 “机械产品” 进化为先进的 “移动智能终端”。在软件定义汽车（SDV）的崭新时代，每一次 OTA 升级的顺利完成、每一秒自动驾驶的精准决策、每一帧车载娱乐交互的流畅…...

编程日记 2025/7/26 21:24:01

Rust从入门到精通之进阶篇：17.宏编程基础

宏编程基础宏是 Rust 中强大的元编程工具，允许你编写可以生成其他代码的代码。与函数不同，宏在编译时展开，可以实现更灵活的代码生成和重用模式。在本章中，我们将探索 Rust 的宏系统，包括声明宏和过程宏的基础知识。宏与函数的区别在深入宏编程之前，让我们先了解宏…...

编程日记 2025/7/27 17:17:55

MySQL基础语法

目录一、数据定义语言（DDL） 1. 创建数据库 2. 删除数据库 3. 创建表 4. 删除表 5. 查看表结构 6. 修改表结构二、数据操作语言（DML） 1. 插入数据 2. 更新数据 3. 删除数据三、数据查询语言（DQL&#xff…...

编程日记 2025/7/24 8:05:18

数据结构练习二习题

第七题： #include<bits/stdc.h> using namespace std;#define MaxSize 100 // 定义顺序表的最大长度typedef int ElemType; // 定义元素类型为inttypedef struct {ElemType data[MaxSize]; // 存储数据的数组int length; // 当前顺序表的长度…...

编程日记 2025/7/23 23:17:31

Flutter 中 GetX 的优缺点及常见问题解决方案

在 Flutter 生态中，GetX 凭借其轻量级、高效的特性，成为众多开发者青睐的状态管理与路由解决方案。然而，任何工具都有其适用场景与局限性。一、GetX 的核心优势 1. 极简开发体验 GetX 通过响应式语法糖（如Rx和Obx）…...

编程日记 2025/7/26 9:52:44

Qt开发：QColorDialog的使用

文章目录一、QColorDialog的基本介绍二、QColorDialog的基本用法三、完整示例一、QColorDialog的基本介绍 QColorDialog 继承自 QDialog，用于让用户选择颜色。它可以以模态或非模态的方式运行，并支持 QColor 作为输入和输出。二、QColorDialog的基本…...

编程日记 2025/7/23 11:26:09

【计算机网络编码与调制】

文章目录一、前言二、编码与调制的基本概念1. 编码常见编码类型： 2. 调制常见调制类型： 三、常见编码技术1. NRZ编码（Non-Return to Zero）特点： 2. 曼彻斯特编码（Manchester）特点： …...

编程日记 2025/7/16 9:01:20

＜数据集＞手势识别数据集＜目标检测＞

数据集下载链接https://download.csdn.net/download/qq_53332949/90529961数据集格式：VOCYOLO格式图片数量：10829张标注数量(xml文件个数)：10829 标注数量(txt文件个数)：10829 标注类别数：26 标注类别名称&…...

编程日记 2025/7/23 16:31:20

魔法测试：用本地多模态大模型(Qwen2.5-VL)将PDF转为Markdown文档

安装咒语清单 📜 pip install -U vllm qwen-vl-utils pdf2image pip install githttps://github.com/huggingface/transformers accelerate（温馨提示：念咒前请检查你的魔法棒(Python环境)是否兼容~） 第一阶段：PDF变…...

编程日记 2025/7/24 23:35:10

【渗透测试】Fastjson 反序列化漏洞原理（二）

目录反序列化漏洞结合 RMI 攻击详解一、RMI 和 JNDI 的基础知识(1) RMI 简介(2) JNDI 简介二、漏洞利用的核心原理1. 构造恶意 JSON 数据2. 设置恶意 RMI 服务3. 加载并执行恶意代码三、具体利用过程环境准备攻击步骤1. 构造恶意 JSON 数据2. 设置恶意 RMI 服务3. 部署恶意类…...

编程日记 2025/7/22 22:17:19

[c语言日寄MAX]深度解析：大小端字节序

【作者主页】siy2333 【专栏介绍】⌈c语言日寄MAX⌋：这是一个专注于C语言刷题的专栏，精选题目，搭配详细题解、拓展算法。从基础语法到复杂算法，题目涉及的知识点全面覆盖，助力你系统提升。无论你是初学者，还…...

编程日记 2025/7/23 23:08:09

凝视型高光谱相机：钻石光谱分析研究与应用

钻石作为一种珍贵的宝石，其颜色和光谱特征一直是宝石学研究的重要方向。中达瑞和测试部样品科对六种不同颜色的钻石样品进行了高光谱成像测试，旨在分析它们在光谱下的差异和可分性。本文将详细介绍此次测试的过程、结果及其意义。测试样品与设备此次…...

编程日记 2025/6/28 3:06:55

2.基于多线程的TCP服务器实现

在我们预想中，服务器端应该能够同时与多个客户端建立连接并进行网络通信。然而，在之前的代码中，服务器实现只支持单一连接，因为在处理连接时，主线程会被accept()、read()或write()等方法阻塞，导致无法响应新…...

编程日记 2025/7/27 19:17:45

自动驾驶01 激光雷达原理

部分转载于原文链接：https://blog.csdn.net/qq_45193988/article/details/143982588 1. 什么是激光雷达激光雷达LiDAR的全称为Light Detection and Ranging 激光探测和测距。激光雷达的工作原理：对红外光束Light Pluses发射、反射和接收来探测物体。…...

编程日记 2025/7/22 15:40:02

基础场景-------------------（5）重载和重写的区别

重写(Override) 从字面上看，重写就是重新写一遍的意思。其实就是在子类中把父类本身有的方法重新写一遍。子类继承了父类原有的方法，但有时子类并不想原封不动的继承父类中的某个方法，所以在方法名，参数列表，返回…...

编程日记 2025/7/24 7:32:22

基于ssm的微博网站(全套)

进入信息时代以来，很多数据都需要配套软件协助处理，这样可以解决传统方式带来的管理困扰。比如耗时长，成本高，维护数据困难，数据易丢失等缺点。本次使用数据库工具MySQL和编程技术JSP开发的微博网站，可以实…...

编程日记 2025/7/26 20:43:37

Java并发编程从入门到实战：同步、异步、多线程核心原理全解析

《Java并发编程从入门到实战：同步、异步、多线程核心原理全解析》一、多线程基础认知（从单核到多核的进化） 1.1 什么是线程？ 线程是程序执行的最小单元，一个进程可以包含多个线程。例如浏览器同时下载文件&#xff0…...

编程日记 2025/7/25 11:48:23

《引流获客》总结

第一章入门篇理解爆款打法和引流打法的区别爆款打法：刷播放量，制作“爆款”视频/文案。引流打法：刷有效转化，不在意播放量，而注重有多少观众被引流成为客户，完成消费，即成交转化。定理&…...

编程日记 2025/7/24 5:21:43

基于Python的机器学习入门指南

在当今数字化时代，机器学习（Machine Learning）已经成为科技领域中最热门的话题之一。它不仅改变了我们对数据的理解和处理方式，还在许多行业中得到了广泛应用，如金融、医疗、交通等。Python作为一门强大的编程语言&…...

编程日记 2025/7/24 1:11:00

【蓝桥杯每日一题】3.25

🏝️专栏： 【蓝桥杯备篇】 🌅主页： f狐o狸x “OJ超时不是终点，是算法在提醒你该优化时间复杂度了！” 目录 3.25 差分数组一、一维差分题目链接： 题目描述： 解题思路：…...

编程日记 2025/7/25 11:19:55

Kubernetes高级应用之-重启策略

一、介绍＋扩展应用（涉及的高级资源在后续会写出来） # Kubernetes Pod重启策略（RestartPolicy）全面解析 ## 一、重启策略的核心价值与重要性在Kubernetes集群中，Pod重启策略（RestartPolicy&a…...

编程日记 2025/7/24 19:47:00

Axure RP9.0教程: 多级联动【设置选项改变时-＞情形-＞面板状态】(给动态面板元件设置相关交互事件的情形，来控制其他面板不同的状态。)

文章目录引言I 多级联动（省、市、区）实现思路添加三省、市、区下拉列表给省下拉框添加数据源将市、区下拉框添加不同状态，分别以省、市命名给省下拉控件设置选项改变时的交互事件省下拉控件的交互事件情形市下拉交互事件的配置II 知识扩展：展示省 → 地级市 → 区县的多级…...

编程日记 2025/7/19 16:59:06

Next.js 严重漏洞：攻击者可绕过中间件授权检查

Next.js React 框架近日披露了一个严重的安全漏洞，攻击者可在特定条件下利用该漏洞绕过授权检查。该漏洞被标记为 CVE-2025-29927，其 CVSS 评分为 9.1（满分 10.0）。漏洞详情 Next.js 在公告中表示：“Next.js 使用内…...

编程日记 2025/7/27 7:08:57

气象可视化卫星云图的方式：方法与架构详解

气象卫星云图是气象预报和气候研究的重要数据来源。通过可视化技术，我们可以将卫星云图数据转化为直观的图像或动画，帮助用户更好地理解气象变化。本文将详细介绍卫星云图可视化的方法、架构和代码实现。一、卫星云图可视化方法 1. 数据获取与预处理卫星云图数据通常来源…...

编程日记 2025/7/18 5:16:18

NLP高频面试题（十四）——DPO、PPO等强化学习训练方法介绍

强化学习（Reinforcement Learning，RL）近年来随着深度学习的快速发展而备受关注，特别是在游戏控制、自动驾驶、机器人控制及大语言模型训练等领域均有广泛应用。本文将重点介绍强化学习中的经典训练方法，包括PPO&#x…...

编程日记 2025/7/24 1:08:06

从 Neo4j 数据库中提取数据并绘制图谱

代码说明： 连接 Neo4j 数据库： 使用 py2neo.Graph 连接到 Neo4j 数据库。确保替换 uri、username 和 password 为你的实际配置。 Cypher 查询： 查询数据库中的节点和关系，限制返回的记录数（例如 LIMIT 100&#xff09…...

编程日记 2025/7/23 14:47:47

Android Compose 框架隐式动画之过渡动画深入剖析(二十六)

Android Compose 框架隐式动画之过渡动画深入剖析一、引言在移动应用开发领域，用户体验始终是至关重要的。动画效果作为提升用户体验的关键元素，能够为应用增添生动性和交互性。Android Compose 作为现代 Android UI 工具包，为开发者提供…...

编程日记 2025/7/26 14:49:02

esp32s3聊天机器人（三）

先放上最新的硬件图添加了按钮、600毫安锂电池和充电板关于 sherpa-onnx 语音生成的打断按说明实现了一下，但是偶尔还是有问题，毕竟不是直接立刻打断生成 private int OnAudioData(nint samples, int n){//Console.WriteLine("OnAudioData n…...

编程日记 2025/7/20 1:32:28

超融合服务器是什么

超融合服务器的定义与背景超融合服务器（Hyperconverged Infrastructure, HCI）是一种通过软件定义技术，将计算、存储、网络和虚拟化功能整合到单一硬件平台中的IT基础设施解决方案。其核心目标是通过资源的高度集成和统一管理，简…...

编程日记 2025/7/27 14:26:25

Rust从入门到精通之精通篇：22.Unsafe Rust 详解

Unsafe Rust 详解在 Rust 的设计哲学中，安全性是核心原则之一。Rust 的所有权系统、借用检查器和类型系统共同保证了内存安全和线程安全。然而，有些底层操作无法通过 Rust 的安全检查机制进行验证，这就是 unsafe Rust 存在的原因。在本章中，我们将深入探讨 unsafe Rust，…...

编程日记 2025/7/27 1:20:06

如何设计系统扩展性以应对业务增长

要设计具备良好扩展性的系统以应对业务增长，关键在于采用分布式架构、实现服务的松耦合、保证数据库的水平扩展能力、使用缓存和CDN优化性能、做好持续监控与自动化运维。其中，服务的松耦合尤为重要。松耦合意味着系统中各服务之间的依赖关系较弱&#x…...

编程日记 2025/7/23 7:02:04

Python基于Django的小区监控图像拼接系统【附源码、文档说明】

博主介绍：✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…...

编程日记 2025/7/24 7:12:07

ElasticSearch快速入门--实现分词搜索

分词题目搜索使用Elasticsearch实现题目数据的存储和分词搜索，需要将数据库的数据同步到 Elasticsearch。 ElasticSearch入门 ElasticSearch（简称ES）是一个开源的分布式搜索和数据分析引擎，用Java开发并且是当前最流行的开源的…...

编程日记 2025/7/26 14:43:43

解读探寻数字影像新路径：树莓集团现状最新进展

树莓集团在数字影像领域展现出强劲的发展势头，其核心战略在于构建完整的数字产业生态链。产业园建设与运营全国布局： 树莓集团已在全国范围内建设并运营多个国际数字影像产业园，旨在打造区域性的数字产业高地。成都案例： 在成…...

编程日记 2025/7/24 11:59:32

数据治理之数据仓库

本文主要阐述了数据仓库在大数据平台项目中的地位和重要性，对目前市场上数据仓库主流设计进行分析说明，讲述了通用数据仓库设计上所应考虑的因素。数据仓库介绍数据仓库是一个过程而不是一个项目；数据仓库是一个环境，而不是一件产品。数据仓库提供用户用于决策支持的当前…...

编程日记 2025/7/26 1:50:47

自由学习记录（48）

When the material of an object disappears, the light and shadow also disappear (synchronized) Tiling And Offset 显示的是四分之一前面的，不是中间的四分之一块， 准确的还是跟着视频学， ，AI一些回答会散发一种“奇怪的错味…...

编程日记 2025/7/27 4:37:13

案例一：课堂点名小助手

案例二：智能搜索提示框

案例三：交互式轮播组件

相关文章：