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

基于HTML5和CSS3实现3D旋转相册效果

news 来源：原创 2025/7/7 3:29:34

在这里插入图片描述

基于HTML5和CSS3实现3D旋转相册效果

这里写目录标题

  • 基于HTML5和CSS3实现3D旋转相册效果
    • 项目介绍
    • 技术栈
    • 核心功能
    • 实现原理
      • 1. HTML结构
      • 2. CSS样式设计
        • 2.1 基础样式设置
        • 2.2 容器样式
        • 2.3 图片样式
      • 3. JavaScript实现
      • 4. 交互功能实现
        • 4.1 触摸和鼠标拖拽
        • 4.2 播放控制
    • 项目亮点
    • 技术难点解析
    • 项目总结

项目介绍

在这个项目中，我们将使用HTML5和CSS3的新特性来实现一个炫酷的3D旋转相册效果。这个相册不仅支持自动旋转展示，还包含了手动控制和触摸交互功能，是一个非常适合用来学习CSS3 3D变换和JavaScript交互的案例。

技术栈

  • HTML5
  • CSS3（transform-style、perspective、transition等3D变换属性）
  • 原生JavaScript（ES6+类的使用）
  • 响应式设计

核心功能

  1. 3D旋转展示效果
  2. 自动播放/暂停控制
  3. 手动切换图片
  4. 触摸和鼠标拖拽交互

实现原理

1. HTML结构

整个相册的HTML结构非常简单，主要包含一个容器元素和控制按钮：

<div class="container" id="slider"></div>
<div class="controls"><button id="prevBtn">上一张</button><button id="nextBtn">下一张</button><button id="playPauseBtn">暂停/播放</button>
</div>

2. CSS样式设计

2.1 基础样式设置
body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #f0f0f0;perspective: 1000px;overflow: hidden;
}

这里使用perspective属性来创建3D空间，为整个相册添加景深效果。

2.2 容器样式
.container {position: relative;width: 200px;height: 200px;transform-style: preserve-3d;animation: rotate 20s infinite linear;
}

关键属性说明：

  • transform-style: preserve-3d：保持子元素的3D效果
  • animation: rotate 20s infinite linear：添加持续旋转动画
2.3 图片样式
.slide {position: absolute;width: 200px;height: 200px;transform-style: preserve-3d;transition: transform 0.5s;
}.slide img {width: 100%;height: 100%;object-fit: cover;border-radius: 10px;box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

3. JavaScript实现

使用ES6类来组织代码，实现图片轮播的核心功能：

class ImageSlider {constructor() {// 初始化DOM元素和状态this.container = document.getElementById('slider');this.isPlaying = true;this.currentAngle = 0;// 初始化图片数组this.images = ['https://picsum.photos/200/200?random=1',// ... 更多图片];this.init();this.bindEvents();}init() {// 创建并布局图片元素this.images.forEach((src, index) => {const slide = document.createElement('div');slide.className = 'slide';const img = document.createElement('img');img.src = src;slide.appendChild(img);// 计算每张图片的角度和半径const angle = (360 / this.images.length) * index;const radius = 300;slide.style.transform = `rotateY(${angle}deg) translateZ(${radius}px)`;this.container.appendChild(slide);});}
}

4. 交互功能实现

4.1 触摸和鼠标拖拽
bindEvents() {let startX = 0;let isDragging = false;const handleStart = (e) => {isDragging = true;startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;this.container.style.animationPlayState = 'paused';};const handleMove = (e) => {if (!isDragging) return;const currentX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;const diff = currentX - startX;this.currentAngle = (diff / 5) % 360;this.container.style.transform = `rotateY(${this.currentAngle}deg)`;};// 添加事件监听this.container.addEventListener('mousedown', handleStart);this.container.addEventListener('touchstart', handleStart);document.addEventListener('mousemove', handleMove);document.addEventListener('touchmove', handleMove);
}
4.2 播放控制
togglePlayPause() {this.isPlaying = !this.isPlaying;this.container.style.animationPlayState = this.isPlaying ? 'running' : 'paused';this.playPauseBtn.textContent = this.isPlaying ? '暂停' : '播放';
}

项目亮点

  1. 3D效果实现：通过CSS3的3D变换属性，实现了真实的3D旋转效果
  2. 交互体验：支持多种交互方式，包括按钮控制、触摸拖拽等
  3. 代码组织：使用ES6类进行代码组织，提高了代码的可维护性
  4. 性能优化：使用CSS3动画代替JavaScript动画，提升性能

技术难点解析

  1. 3D空间构建：

    • 使用perspective属性创建3D空间
    • 通过transform-style: preserve-3d保持子元素的3D效果

  2. 图片布局：

    • 使用数学计算确定每张图片的角度和位置
    • 通过translateZ控制图片到中心点的距离

  3. 交互处理：

    • 处理触摸和鼠标事件的差异
    • 实现平滑的拖拽效果

项目总结

这个3D旋转相册项目展示了现代前端技术的强大功能。通过CSS3的3D变换和JavaScript的交互处理，我们实现了一个既美观又实用的图片展示效果。项目中的很多技术点都可以应用到其他3D效果的开发中，比如：

  • CSS3 3D变换的使用方法
  • 触摸和鼠标事件的处理
  • 动画效果的实现
  • 面向对象的代码组织方式

通过这个项目，我们不仅实现了炫酷的视觉效果，更重要的是学习到了很多实用的前端开发技巧。这些经验对于开发其他交互性强的Web应用都有很大的帮助。

相关文章：

基于HTML5和CSS3实现3D旋转相册效果

基于HTML5和CSS3实现3D旋转相册效果 这里写目录标题 基于HTML5和CSS3实现3D旋转相册效果项目介绍技术栈核心功能实现原理1. HTML结构2. CSS样式设计2.1 基础样式设置2.2 容器样式2.3 图片样式 3. JavaScript实现4. 交互功能实现4.1 触摸和鼠标拖拽4.2 播放控制 项目亮点技术难点…...

编程日记 2025/7/7 3:29:34

unity中Xcharts图表鼠标悬浮表现异常

鼠标悬浮在面板附近&#xff0c;只显示单独的一个项目 而且无论鼠标如何移动&#xff0c;根本没有效果。 解决方案&#xff1a; 需要在对应的Canvas上绑定主相机才可以 鼠标移动到项目上就有信息展示了...

编程日记 2025/6/28 6:48:29

Unity程序嵌入Qt后点击UI按钮Button没有反应

一、前言 在一次项目中&#xff0c;需要将Unity程序嵌入qt中&#xff0c;并在主界面显示&#xff0c;根据网络资料与相关代码&#xff0c;成功将unity程序嵌入&#xff0c;但是在点击Unity的Button按钮时却没有响应&#xff0c;在查找相关资料后&#xff0c;解决问题&#xff…...

编程日记 2025/7/7 3:28:22

Linux安装Cmake （Centos 7.9）

cmake安装 这个虽然已经更新到了4.0.0版本了&#xff0c;但是我们要用3.5版本的&#xff0c;因为这个比较稳定 官方地址&#xff1a;https://github.com/Kitware/CMake/releases/tag/v3.5.0&#xff0c;选择那个cmake-3.5.0-Linux-x86_64.tar.gz下载&#xff0c; 首先解压文…...

编程日记 2025/6/28 4:49:25

31天Python入门——第14天:异常处理

你好&#xff0c;我是安然无虞。 文章目录 异常处理1. Python异常2. 异常捕获try-except语句捕获所有的异常信息获取异常对象finally块 3. raise语句4. 自定义异常5. 函数调用里面产生的异常补充练习 异常处理 1. Python异常 Python异常指的是在程序执行过程中发生的错误或异…...

编程日记 2025/7/2 13:50:01

Linux使用集群服务器查看已安装conda环境，且环境名无显示、系统环境混乱等问题

一、问题 在使用集群服务器前可以查看导入&#xff0c;module load不需要安装。我都是自己重新下载Anaconda3-2024.10-1-Linux-x86_64.sh&#xff0c;然后安装&#xff0c;导致混乱。下面是情况 1.创建的环境名跑到目录下了 2.多个base,且有个base无显示 二、解决办法 1.删…...

编程日记 2025/7/7 3:10:10

【Linux】B站黑马程序视频学习笔记（一）

一、Linux内核与发行版 注意&#xff1a;下图程序指向内核的箭头用的是“调用”&#xff0c;内核指向硬件用的是“调度”。 Linux内核代码下载网站&#xff1a;https://www.kernel.org/ 二、虚拟机-VMware 学习Linux可以借助虚拟机&#xff08;其使用到的CPU、内存、硬盘都是…...

编程日记 2025/6/29 15:32:03

HarmonyOS NEXT——【鸿蒙原生应用加载Web页面】

鸿蒙客户端加载Web页面&#xff1a; 在鸿蒙原生应用中&#xff0c;我们需要使用前端页面做混合开发&#xff0c;方法之一是使用Web组件直接加载前端页面&#xff0c;其中WebView提供了一系列相关的方法适配鸿蒙原生与web之间的使用。 效果 web页面展示&#xff1a; Column()…...

编程日记 2025/6/29 7:49:12

【软件工程】习题及答案

目录 第一章 习题第一章 习题答案第二章 习题第二章 习题答案第三章 习题第三章 习题答案第四章 习题第四章 习题答案第五章 习题第五章 习题答案第六章 习题第六章 习题答案第七章 习题第七章 习题答案 第一章 习题 一、选择题 1&#xff0e;关于引起软件危机的原因&#xff…...

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

css选择最后结尾的元素DOM

前言 选中最后一个元素&#xff0c;实际使用非常频繁。 解决方案 使用 CSS 提供的选择器&#xff0c;即可完成。 如下代码示例&#xff0c;两种选择器均可实现。 <p>...</p>p:last-child{ background:#ff0000; }p:nth-last-child(1){background:#ff0000; }p&…...

编程日记 2025/7/7 3:08:20

【AI论文】挑战推理的边界：大型语言模型的数学基准测试

摘要&#xff1a;近年来&#xff0c;大型推理模型的迅猛发展导致现有用于评估数学推理能力的基准测试趋于饱和&#xff0c;这凸显出迫切需要更具挑战性和严谨性的评估框架。为填补这一空白&#xff0c;我们推出了OlymMATH&#xff0c;这是一项全新的奥林匹克级数学基准测试&…...

编程日记 2025/7/7 2:51:27

使用 Python包管理工具 uv 完成 Open WebUI 的安装

uv 是一个极其快速的 Python 包安装器和解析器&#xff0c;用 Rust 编写&#xff0c;旨在作为 pip 和 pip-tools 工作流的替代品 使用 uv 安装&#xff08;推荐&#xff09; macOS/Linux&#xff1a; curl -LsSf https://astral.sh/uv/install.sh | shWindows&#xff1a; po…...

编程日记 2025/7/2 4:43:25

【区块链安全 | 第三篇】主流公链以太坊运行机制

文章目录 1. 以太坊账户类型2. 以太坊网络架构2.1 节点类型2.2 交易流程 3. 共识机制4. Gas 机制4.1 Gas 计算方式4.2 以太坊 EIP-1559 交易机制 5. EVM&#xff08;以太坊虚拟机&#xff09;5.1 EVM 结构5.2 EVM 指令5.3 EVM 运行机制 6. 智能合约7. ERC 代币标准7.1 ERC-207.…...

编程日记 2025/7/4 13:32:36

C# 字符串（String）

C# 字符串&#xff08;String&#xff09; 引言 在C#编程语言中&#xff0c;字符串&#xff08;String&#xff09;是处理文本数据的基础。字符串是字符的有序集合&#xff0c;用于存储和处理文本信息。C#的字符串类型是System.String&#xff0c;它是一个引用类型&#xff0…...

编程日记 2025/7/2 11:29:06

Unity Shader 学习18：Shader书写基本功整理

1. Drawer [HideInInspector]&#xff1a;面板上隐藏[NoScaleOffset]&#xff1a;隐藏该纹理贴图的TillingOffset[Normal]&#xff1a;检查该纹理是否设为法线贴图[HDR]&#xff1a;将颜色类型设为高动态范围颜色&#xff08;摄像机也要开启HDR才有效果&#xff09;[PowerSlid…...

编程日记 2025/6/29 21:46:04

构建第一个SpringBoot程序

第一种方式&#xff1a; 注&#xff0c;构建过程中一定要联网 new module -->选择spring Initializr 选择Web --> 勾选Spring Web --> create 构建好的项目如下 这里的 .mvn .git* HELP.md mvnw* 都可以删除 编辑好controller 之后 点击即可运行第一个springbo…...

编程日记 2025/7/4 23:26:55

Java高级JVM知识点记录，内存结构，垃圾回收，类文件结构，类加载器

JVM是Java高级部分&#xff0c;深入理解程序的运行及原理&#xff0c;面试中也问的比较多。 JVM是Java程序运行的虚拟机环境&#xff0c;实现了“一次编写&#xff0c;到处运行”。它负责将字节码解释或编译为机器码&#xff0c;管理内存和资源&#xff0c;并提供运行时环境&a…...

编程日记 2025/7/7 3:18:02

使用飞书API自动化更新共享表格数据

飞书API开发之自动更新共享表格 天马行空需求需求拆解1、网站数据爬取2、飞书API调用2.1 开发流程2.2 创建应用2.3 配置应用2.4 发布应用2.5 修改表格权限2.6 获取tenant_access_token2.7 调用API插入数据 总结 天马行空 之前一直都是更新的爬虫逆向内容&#xff0c;工作中基本…...

编程日记 2025/7/5 12:59:01

C++中ShellExecute函数使用方法说明，如果一开始参数为隐藏，后面还能再显示出来吗

文章目录 一、ShellExecute基础用法函数原型关键参数 nShowCmd示例代码&#xff1a;启动程序并隐藏窗口 二、隐藏后能否重新显示窗口直接答案 三、实现隐藏后显示窗口的步骤1. 获取目标窗口句柄2. 显示窗口 四、完整流程示例五、注意事项六、总结 在C中使用ShellExecute函数时&…...

编程日记 2025/7/3 6:59:20

MySQL的多表查询

我们之前在讲解SQL语句的时候&#xff0c;讲解了DQL语句&#xff0c;也就是数据查询语句&#xff0c;但是之前讲解的查询都是单表查询&#xff0c;而本章节我们要学习的则是多表查询操作&#xff0c;主要从以下几个方面进行讲解。 5.1 多表关系 项目开发中&#xff0c;在进行…...

编程日记 2025/7/7 3:04:01

（UI自动化测试web端）第二篇：元素定位的方法_css定位之层级选择器

看代码里的【find_element_by_css_selector( )】( )里的表达式怎么写&#xff1f; 文章介绍了第五种写法&#xff0c;层级选择器 &#xff0c;你要根据网页中的实际情况来判断自己到底要用哪一种方法来进行元素定位。每种方法都要多练习&#xff0c;全都熟了之后你在工作当中使…...

编程日记 2025/6/28 5:01:46

《Python Web部署应知应会》No2：如何基于FastAPI 和 OLLAMA 架构实现高并发 AI 推理服务

《Python Web部署应知应会》No2&#xff1a;如何基于FastAPI 和 OLLAMA 架构实现高并发 AI 推理服务&#xff08;上&#xff09; 摘要&#xff1a; 在 FastAPI 和 OLLAMA 架构中实现高并发 AI 推理服务&#xff0c;并优化性能指标采集和缓存策略&#xff0c;可以充分利用 asy…...

编程日记 2025/6/28 5:03:10

【LeetCode 题解】算法：8.字符串转换整数（atoi）

一、问题描述 在 LeetCode 的算法题库里&#xff0c;有这样一道题目&#xff0c;要求我们实现一个名为 myAtoi(string s) 的函数&#xff0c;其功能是将给定的字符串转换为一个 32 位有符号整数。具体的转换规则如下&#xff1a; 处理步骤 剔除前导空格&#xff1a;读取字符串…...

编程日记 2025/7/4 20:23:28

Uni-app页面信息与元素影响解析

获取窗口信息uni.getWindowInfo {pixelRatio: 3safeArea:{bottom: 778height: 731left: 0right: 375top: 47width: 375}safeAreaInsets: {top: 47, left: 0, right: 0, bottom: 34},screenHeight: 812,screenTop: 0,screenWidth: 375,statusBarHeight: 47,windowBottom: 0,win…...

编程日记 2025/6/30 5:32:30

飞书电子表格自建应用

背景 coze官方的插件不支持更多的飞书电子表格操作&#xff0c;因为需要自建应用 飞书创建文件夹 创建应用 开发者后台 - 飞书开放平台 添加机器人 添加权限 创建群 添加刚刚创建的机器人到群里 文件夹邀请群 创建好后&#xff0c;就可以拿到id和key 参考教程&#xff1a; 创…...

编程日记 2025/7/4 17:08:48

《云原生安全攻防》-- K8s容器安全：权限最小化与SecurityContext

一旦容器被入侵&#xff0c;攻击者就可以获取到容器的权限&#xff0c;所以&#xff0c;容器运行过程中&#xff0c;我们首先需要考虑的是容器的权限问题。 在本节课程中&#xff0c;我们将重点介绍权限最小化以及如何使用SecurityContext来管理容器的权限。 在这个课程中&…...

编程日记 2025/7/1 4:41:08

uniapp中的流式输出

一、完整代码展示 目前大多数的ai对话都是流式输出&#xff0c;也就是对话是一个字或者多个字逐一进行显示的下面是一个完整的流式显示程序&#xff0c;包含的用户的消息发出和ai的消息回复 <template><view class"chat-container"><view class&quo…...

编程日记 2025/7/3 12:27:07

PipeWire 音频设计与实现分析一——介绍

PipeWire 是一个基于图的媒体处理引擎&#xff0c;一个可以运行多媒体节点图的媒体服务器&#xff0c;是 Linux 的音频/视频总线&#xff0c;它管理 Linux 系统中&#xff0c;不同应用程序对音频和视频设备的共享访问。它提供了一个本地客户端音频 API&#xff0c;但也提供兼容…...

编程日记 2025/7/3 17:48:15

MVC 文件夹：架构之美，开发之魂

MVC 文件夹&#xff1a;架构之美&#xff0c;开发之魂 引言 在软件开发领域&#xff0c;MVC&#xff08;Model-View-Controller&#xff09;架构模式已经成为了一种广泛应用的架构设计理念。它将应用程序分为三个核心部分&#xff1a;模型&#xff08;Model&#xff09;、视图…...

编程日记 2025/7/1 17:48:13

IO模型之于并发编程模型、并发模型之于架构模式

一、并发编程模型主要包括以下几种‌&#xff1a; ‌多进程模型‌&#xff1a;利用操作系统的进程模型来实现并发。每个用户请求接入时都会创建一个进程&#xff0c;适用于I/O密集型任务。缺点是创建进程的开销高&#xff0c;且上下文切换的开销也大。典型应用如Apache Web Ser…...

编程日记 2025/7/7 2:56:58

Postman 7.3.5 旧版下载指南（Win64）及注意事项

Postman-win64-7.3.5-Setup 是 Postman 的一个旧版本&#xff08;2019年发布&#xff0c;适用于 Windows 64位系统&#xff09;。以下是相关信息和建议&#xff1a; 1. Postman 7.3.5 版本说明 功能&#xff1a;用于 API 开发、测试和协作。 系统要求&#xff1a;Windows 64位…...

编程日记 2025/7/6 20:33:17

​Flink/Kafka在python中的用处

一、基础概念 1. ​Apache Kafka 是什么&#xff1f; ​核心功能&#xff1a;Kafka 是一个分布式流处理平台&#xff0c;主要用于构建实时数据管道和流式应用程序。​核心概念&#xff1a; ​生产者&#xff08;Producer&#xff09;​&#xff1a;向 Kafka 发送数据的程序。…...

编程日记 2025/6/30 9:26:13

【Spring Boot 与 Spring Cloud 深度 Mape 之十】体系整合、部署运维与进阶展望

【Spring Boot 与 Spring Cloud 深度 Mape 之十】体系整合、部署运维与进阶展望 #微服务实战 #Docker #Kubernetes #SpringSecurity #OAuth2 #分布式事务 #Seata #ServiceMesh #总结 #SpringCloud #SpringBoot 系列终章&#xff1a;经过前九篇 [【深度 Mape 系列】] 的系统学习…...

编程日记 2025/6/30 9:09:48

轻松理解Python装饰器：从基础到应用

一、为什么需要装饰器 想象一下&#xff0c;你写了很多函数来完成不同的任务&#xff0c;突然有个新需求&#xff1a;在每个函数执行前打印一条“函数开始执行”的消息&#xff0c;执行后打印“函数执行结束”。如果没有装饰器&#xff0c;你就得在每个函数里手动添加这两条打…...

编程日记 2025/6/28 4:33:19

RabbitMQ 技术详解：异步消息通信的核心原理与实践

这里写目录标题 RabbitMQ 技术详解&#xff1a;异步消息通信的核心原理与实践一、RabbitMQ 本质剖析核心架构组件 二、核心功能与应用场景主要作用典型应用场景 三、工作流程深度解析消息传递流程关键协议机制 四、Java 实现示例1. 依赖配置&#xff08;Maven&#xff09;2. 消…...

编程日记 2025/7/4 12:04:55

MySQL-- 多表查询的分类，SQL92与SQL99，7种JOIN的实现，SQL99语法的新特性

目录 一&#xff0c;多表查询的分类 角度1&#xff1a;等值连接 vs 非等值连接 角度2&#xff1a;自连接 vs 非自连接 角度3&#xff1a;内连接 vs 外连接 二&#xff0c;SQL92语法实现内连接&#xff1a;见上&#xff0c;略SQL92语法实现外连接&#xff1a;使用 -…...

编程日记 2025/6/29 20:55:22

Selenium文件上传

在 Web 自动化测试中，文件上传是一项常见的任务。不同的网站和前端技术可能导致上传方式有所不同，因此需要采用不同的方法进行处理。 方法 1：使用 send_keys() 直接上传（最常用） 适用场景： 页面中 有标准的 <input type="file"> 标签。 不需要弹出 Wind…...

编程日记 2025/7/7 2:54:49

getID3获取本地或远程视频时长

音频文件也可使用&#xff0c;使用ffmeg安装太复杂了 附ffmpeg方式&#xff1a;centos下安装ffmpeg_yum安装ffmpeg-CSDN博客 使用composer先安装 composer require james-heinrich/getid3 获取本地视频 //获取本地视频$video_path $_SERVER[DOCUMENT_ROOT].$params[video];…...

编程日记 2025/7/7 3:01:28

OpenAI流式解析

OpenAI 流式的代码&#xff1a; 首选一般请使用os.getenv 去读环境变量的内容 注意使用pip install python-dotenv 的安装方法 load_dotenv 是这个库提供的一个函数&#xff0c;用于读取 .env 文件并将其中定义的键值对设置为系统的环境变量。 默认情况下&#xff0c;load_…...

编程日记 2025/7/7 3:18:53

在Trae中设置Python解释器版本

Python 是一种广泛使用的高级编程语言&#xff0c;因其简洁易读的语法和强大的功能而备受欢迎。随着 Python 的不断发展&#xff0c;多个版本相继发布&#xff0c;每个版本都带来了新特性和改进。然而&#xff0c;这也带来了一些问题&#xff0c;比如不同的工程&#xff0c;需要…...

编程日记 2025/7/6 21:52:46

第 6 章:优化动态分配内存的变量_《C++性能优化指南》_notes

优化动态分配内存的变量 第六章核心知识点详解总结第六章 动态内存优化 重点难点梳理 一、多选题&#xff08;每题至少2个正确答案&#xff09;二、设计题答案与详解多选题答案设计题答案示例 第六章核心知识点详解 动态内存分配的开销 知识点&#xff1a;动态内存分配需要调用…...

编程日记 2025/7/3 9:00:38

图像数据增强教程：为目标检测任务准备数据

目录 一、简介 二、代码结构 三、环境要求 四、数据增强类 4.1 调整增强概率和参数 4.2 增强方法参数 五、数据增强主函数 六、主函数 效果展示 完整代码 一、简介 在目标检测任务中&#xff0c;数据增强是一种关键技术&#xff0c;通过对原始图像应用多种变换来增加…...

编程日记 2025/7/2 20:07:56

Unity编辑器功能及拓展(2) —Gizmos编辑器绘制功能

Unity中的Gizmos功能是用于在场景视图中绘制辅助图形或图标的工具&#xff0c;帮助开发者在编辑模式下直观调试和可视化游戏对象的位置、范围、方向等信息。 一.定义概述 Gizomsd 概述 Gizoms是Unity提供的一个API&#xff0c;或者叫做一个工具类&#xff0c;包含一系列静态…...

编程日记 2025/7/6 15:55:03

HarmonyOS WebSocket全场景应用开发深度解析

注&#xff1a;适用版本&#xff08;Harmony OS NEXT / 5.0 / API 12 &#xff09; 一、最终效果预览 二、基础代码结构 Entry Component struct ChatApp {State messages: Message[] [] // 所有聊天记录State inputText: string "" // 输入框内容State isCon…...

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

JCRQ1河马算法+消融实验！HO-CNN-LSTM-Attention系列四模型多变量时序预测

JCRQ1河马算法消融实验&#xff01;HO-CNN-LSTM-Attention系列四模型多变量时序预测 目录 JCRQ1河马算法消融实验&#xff01;HO-CNN-LSTM-Attention系列四模型多变量时序预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 基于HO-CNN-LSTM-Attention、CNN-LSTM-Attent…...

编程日记 2025/7/4 14:35:46

ubuntu 安装 postgresql

在 Ubuntu 系统中安装 PostgreSQL 的步骤如下&#xff1a; 步骤 1&#xff1a;更新软件包列表 sudo apt update步骤 2&#xff1a;安装 PostgreSQL Ubuntu 默认仓库包含 PostgreSQL&#xff0c;直接安装&#xff1a; sudo apt install postgresql postgresql-contrib -ypost…...

编程日记 2025/7/4 1:19:37

深入实践：基于WebSocket的全球化金融数据实时对接方案。 马来西亚、印度、美国金融数据API

深入实践&#xff1a;基于WebSocket的全球化金融数据实时对接方案 在全球金融市场中&#xff0c;实时数据的高效获取与处理是量化交易、行情监控等场景的核心能力。本文将以技术实践为核心&#xff0c;详细解析如何通过WebSocket技术实现美国、印度、马来西亚等多国金融数据&a…...

编程日记 2025/7/1 9:23:47

深度学习处理时间序列（5）

Keras中的循环层 上面的NumPy简单实现对应一个实际的Keras层—SimpleRNN层。不过&#xff0c;二者有一点小区别&#xff1a;SimpleRNN层能够像其他Keras层一样处理序列批量&#xff0c;而不是像NumPy示例中的那样只能处理单个序列。也就是说&#xff0c;它接收形状为(batch_si…...

编程日记 2025/7/5 16:37:13

Linux： 进程间通信

目录 一 前言 二 进程间通信目的 三 进程间通信方法 四 管道通信 1. 进程如何通信 2.管道概念 2.1匿名管道 2.2 匿名管道对多个进程的控制 2.3 命名管道 2.4 命名管道原理 一 前言 在我们学习进程的时候&#xff0c;我们知道正是因为程序地址空间的存在&#xff…...

编程日记 2025/7/3 1:22:21

为什么idea显示数据库连接成功，但操作数据库时，两边数据不同步

今日份小bug又叕又来了&#xff01; 一、原因分析 1. 未提交的事务 - IDEA 中执行了修改操作但未提交事务 - 其他客户端有未提交的修改 2. 连接隔离级别问题 - 不同连接使用了不同的事务隔离级别 - 读未提交(READ UNCOMMITTED)导致看到未提交数据 3. 多客户端同时操作…...

编程日记 2025/7/3 21:24:47