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

html+js实现图片的放大缩小等比缩放翻转,自动播放切换,顺逆时针旋转

效果图:

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片预览</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;text-align: center;background-color: #f4f4f4;}.thumbnails {display: flex;justify-content: center;margin: 20px;}.thumbnail {width: 80px;height: 80px;margin: 5px;object-fit: cover;border: 2px solid transparent;cursor: pointer;transition: transform 0.2s;}.thumbnail:hover {transform: scale(1.1);}.thumbnail.active {border-color: #007bff;}.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);z-index: 1000;justify-content: center;align-items: center;flex-direction: column;}.modal.open {display: flex;}.image-container {max-width: 90%;max-height: 70%;overflow: hidden;position: relative;}.display-image {max-width: 100%;max-height: 100%;transition: transform 0.3s;}.controls {margin-top: 20px;display: flex;justify-content: center;flex-wrap: wrap;gap: 15px;}.icon-button {display: flex;justify-content: center;align-items: center;width: 24px;height: 24px;background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明背景 */color: white;border-radius: 50%;font-size: 20px;cursor: pointer;transition: background-color 0.3s, transform 0.2s;}.icon-button:hover {background-color: rgba(0, 0, 0, 0.8); /* 悬停时更深的黑色 */transform: scale(1.1);}.icon-button:active {transform: scale(0.9);}.icon-button:disabled {background-color: rgba(0, 0, 0, 0.2); /* 禁用时更浅 */cursor: not-allowed;}</style>
</head>
<body>
<h1>图片预览</h1><!-- 缩略图 -->
<div class="thumbnails" id="thumbnailContainer"><img src="imgs/wallhaven-kx5v57.jpg" class="thumbnail" alt="Thumbnail 1"><img src="imgs/wallhaven-wegll6.png" class="thumbnail" alt="Thumbnail 2"><img src="imgs/wallhaven-9m5mk1.png" class="thumbnail" alt="Thumbnail 3">
</div><!-- 弹窗 -->
<div class="modal" id="imageModal"><div class="image-container"><img src="" alt="Current Image" id="currentImage" class="display-image"></div><div class="controls"><div class="icon-button" id="zoomInBtn" title="放大"><svg t="1732241294803" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7668" width="16" height="16"><path d="M867.7 423.8H599.8V155.9c0-49.3-40-89.3-89.3-89.3s-89.3 40-89.3 89.3v267.9H153.3c-49.3 0-89.3 40-89.3 89.3s40 89.3 89.3 89.3h267.9v267.9c0 49.3 40 89.3 89.3 89.3s89.3-40 89.3-89.3V602.4h267.9c49.3 0 89.3-40 89.3-89.3s-40-89.3-89.3-89.3z" fill="#ffffff" p-id="7669"></path></svg></div><div class="icon-button" id="zoomOutBtn" title="缩小"><svg t="1732241472622" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9692" width="16" height="16"><path d="M1.024 448.512h1024v128h-1024z" fill="#ffffff" p-id="9693"></path></svg></div><div class="icon-button" id="resetBtn" title="1:1 缩放"><svg t="1732241553547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13299" width="16" height="16"><path d="M288 149.333333v725.333334h-85.333333V250.368L136.405333 283.52 98.24 207.146667 213.930667 149.333333H288zM896 149.333333h-74.069333l-115.669334 57.834667 38.144 76.330667L810.666667 250.368V874.666667h85.333333V149.333333z m-320 170.666667h-106.666667v106.666667h106.666667v-106.666667z m0 277.333333h-106.666667v106.666667h106.666667v-106.666667z" p-id="13300" fill="#ffffff"></path></svg></div><div class="icon-button" id="flipBtn" title="翻转"><svg t="1732241626557" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15368" width="16" height="16"><path d="M962.074 490.554L647.271 355.638l125.831-89.881c-65.56-69.108-157.968-112.493-260.747-112.493-174.244 0-319.503 123.884-352.634 288.369l-83.949-34.777C123.56 209.825 300.628 63.32 512.355 63.32c132.973 0 252.063 58.09 334.393 149.833l115.326-82.375v359.776z m-710.47 269.773c65.556 69.108 157.973 112.488 260.752 112.488 174.918 0 320.546-124.873 352.931-290.307l83.868 35.874c-47.481 197.458-224.77 344.377-436.799 344.377-132.973 0-252.068-58.086-334.398-149.828l-115.322 82.37V535.525L377.44 670.441l-125.836 89.886z" p-id="15369" fill="#ffffff"></path></svg></div><div class="icon-button" id="prevBtn" title="上一张"><svg t="1732241691822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17732" width="16" height="16"><path d="M658.29178 1003.504117l223.006914 0L398.119373 520.342595 881.298746 0 658.291782 0 175.112507 520.342595 658.29178 1003.504117z" p-id="17733" fill="#ffffff"></path></svg></div><div class="icon-button" id="autoPlayBtn" title="自动播放"><svg t="1732241717970" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18888" width="16" height="16"><path d="M891.161 512l-749.992 450v-900l749.992 450z" p-id="18889" fill="#ffffff"></path></svg></div><div class="icon-button" id="nextBtn" title="下一张"><svg t="1732241665540" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17426" width="16" height="16"><path d="M881.298746 520.342595 398.119373 0 175.112486 0 658.29178 520.342595 175.112507 1003.504117l223.006914 0L881.298746 520.342595z" p-id="17427" fill="#ffffff"></path></svg></div><div class="icon-button" id="rotateClockwiseBtn" title="顺时针旋转"><svg t="1732241858925" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21128" width="16" height="16"><path d="M0 511.999147c0 282.794195 232.618279 511.999147 519.508467 511.999146a521.812464 521.812464 0 0 0 319.743468-108.543819l-89.343852-93.86651a391.679347 391.679347 0 0 1-230.399616 74.410543c-215.295641 0-389.631351-171.861047-389.63135-383.99936 0-212.05298 174.421043-383.99936 389.63135-383.99936 210.772982 0 382.292696 165.119725 389.119352 371.199381H727.294788l233.72761 255.999573 233.727611-255.999573h-156.15974C1031.678281 222.463629 801.96133 0 519.593801 0 232.703612 0 0 229.204951 0 511.999147z" fill="#ffffff" p-id="21129"></path></svg></div><div class="icon-button" id="rotateCounterClockwiseBtn" title="逆时针旋转"><svg t="1732241885059" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22261" width="16" height="16"><path d="M1194.664676 511.999147c0 282.794195-232.618279 511.999147-519.508468 511.999146a521.812464 521.812464 0 0 1-319.743467-108.543819l89.343851-93.86651a391.679347 391.679347 0 0 0 230.399616 74.410543c215.295641 0 389.631351-171.861047 389.631351-383.99936 0-212.05298-174.421043-383.99936-389.631351-383.99936-210.772982 0-382.292696 165.119725-389.119351 371.199381h181.418364l-233.727611 255.999573L0 499.199168h156.15974C162.986395 222.463629 392.703345 0 675.070875 0 961.961063 0 1194.664676 229.204951 1194.664676 511.999147z" fill="#ffffff" p-id="22262"></path></svg></div><div class="icon-button" id="closeBtn" title="关闭"><svg t="1732241912849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23389" width="16" height="16"><path d="M0 0h1024v1024H0z" fill="#ffffff" fill-opacity="0" p-id="23390"></path><path d="M240.448 168l2.346667 2.154667 289.92 289.941333 279.253333-279.253333a42.666667 42.666667 0 0 1 62.506667 58.026666l-2.133334 2.346667-279.296 279.210667 279.274667 279.253333a42.666667 42.666667 0 0 1-58.005333 62.528l-2.346667-2.176-279.253333-279.253333-289.92 289.962666a42.666667 42.666667 0 0 1-62.506667-58.005333l2.154667-2.346667 289.941333-289.962666-289.92-289.92a42.666667 42.666667 0 0 1 57.984-62.506667z" fill="#ffffff" p-id="23391"></path></svg></div></div></div><script>const thumbnails = document.querySelectorAll('.thumbnail');const modal = document.getElementById('imageModal');const currentImage = document.getElementById('currentImage');const zoomInBtn = document.getElementById('zoomInBtn');const zoomOutBtn = document.getElementById('zoomOutBtn');const resetBtn = document.getElementById('resetBtn');const rotateClockwiseBtn = document.getElementById('rotateClockwiseBtn');const rotateCounterClockwiseBtn = document.getElementById('rotateCounterClockwiseBtn');const flipBtn = document.getElementById('flipBtn');const prevBtn = document.getElementById('prevBtn');const nextBtn = document.getElementById('nextBtn');const autoPlayBtn = document.getElementById('autoPlayBtn');const closeBtn = document.getElementById('closeBtn');let currentIndex = 0;let zoom = 1;let rotation = 0;let flip = 1;let autoPlayInterval;const images = Array.from(thumbnails).map(thumbnail => thumbnail.src);function openModal(index) {currentIndex = index;updateImage();modal.classList.add('open');}function closeModal() {modal.classList.remove('open');clearInterval(autoPlayInterval);}function updateImage() {currentImage.src = images[currentIndex];currentImage.style.transform = `scale(${zoom * flip}, ${zoom})rotate(${rotation}deg)`;thumbnails.forEach((thumbnail, index) => {thumbnail.classList.toggle('active', index === currentIndex);});}function zoomIn() {zoom += 0.1;updateImage();}function zoomOut() {zoom = Math.max(0.1, zoom - 0.1);updateImage();}function resetImage() {zoom = 1;rotation = 0;flip = 1;updateImage();}function rotateClockwise() {rotation += 90;updateImage();}function rotateCounterClockwise() {rotation -= 90;updateImage();}function flipImage() {flip *= -1;updateImage();}function showPrevious() {currentIndex = (currentIndex - 1 + images.length) % images.length;updateImage();}function showNext() {currentIndex = (currentIndex + 1) % images.length;updateImage();}function toggleAutoPlay() {if (autoPlayInterval) {clearInterval(autoPlayInterval);autoPlayInterval = null;autoPlayBtn.textContent = '▶';} else {autoPlayInterval = setInterval(showNext, 3000);autoPlayBtn.textContent = '∥';}}thumbnails.forEach((thumbnail, index) => {thumbnail.addEventListener('click', () => openModal(index));});zoomInBtn.addEventListener('click', zoomIn);zoomOutBtn.addEventListener('click', zoomOut);resetBtn.addEventListener('click', resetImage);rotateClockwiseBtn.addEventListener('click', rotateClockwise);rotateCounterClockwiseBtn.addEventListener('click', rotateCounterClockwise);flipBtn.addEventListener('click', flipImage);prevBtn.addEventListener('click', showPrevious);nextBtn.addEventListener('click', showNext);autoPlayBtn.addEventListener('click', toggleAutoPlay);closeBtn.addEventListener('click', closeModal);</script>
</body>
</html>

相关文章:

html+js实现图片的放大缩小等比缩放翻转,自动播放切换,顺逆时针旋转

效果图&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>图片预览</title><sty…...

【蓝桥杯C/C++】翻转游戏:多种实现与解法解析

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: 蓝桥杯C/C 文章目录 &#x1f4af;题目&#x1f4af;问题分析解法一&#xff1a;减法法解法二&#xff1a;位运算解法解法三&#xff1a;逻辑非解法解法四&#xff1a;条件运算符解法解法五&#xff1a;数组映射法不同解法的比较…...

介绍一下toupper(ch);函数(c基础)

hi , I am 36 适合对象c语言初学者 toupper(ch1); tolower(ch2); 是返回ch的大写或小写的字符但并不改变ch 若传递数字仍返回该数字 格式 #include<ctype.h> char res toupper(ch); 链接扫雷游戏代码分享(c基础)-CSDN博客 hi , I am 36. thanks for your look…...

如何使用Python代码实现给GPU预加热

如何使用Python代码实现给GPU预加热 一、引言二、使用深度学习框架进行预加热2.1 TensorFlow预加热2.2 PyTorch预加热三、使用CUDA进行预加热四、预加热的效果评估与优化五、结论与展望在高性能计算和深度学习领域,GPU(图形处理器)已经成为不可或缺的加速工具。然而,在实际…...

基于 SpringBoot 的作业管理系统【附源码】

基于 SpringBoot 的作业管理系统 效果如下&#xff1a; 系统注册页面 学生管理页面 作业管理页面 作业提交页面 系统管理员主页面 研究背景 随着社会的快速发展&#xff0c;信息技术的广泛应用已经渗透到各个行业。在教育领域&#xff0c;课程作业管理是学校教学活动中的重要…...

LeetCode题解:26.删除有序数组中的重复项【Python题解超详细,双指针法】,知识拓展:原地修改

题目描述 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量为 k &…...

docker 容器运行Ruoyi-cloud

1&#xff0c;linux系统安装openjdk1.8,mvn,dokcer,node,git 2&#xff0c;拉取代码 1&#xff09;查看gitee仓库地址 2&#xff09;创建/app文件夹&#xff0c;进入app目录 mkdir /app cd /app 3&#xff09;clone代码 4&#xff09;修改配置文件中nacos地址 # 修改注…...

【Unity How】Unity中如何实现物体的匀速往返移动

直接上代码 using UnityEngine;public class CubeBouncePingPong : MonoBehaviour {[Header("移动参数")][Tooltip("移动速度")]public float moveSpeed 2f; // 控制移动的速度[Tooltip("最大移动距离")]public float maxDistance 5f; // 最大…...

STM32完全学习——系统时钟设置

一、时钟框图的解读 首先我们知道STM32在上电初始化之后使用的是内部的HSI未经过分频直接通过SW供给给系统时钟&#xff0c;由于内部HSI存在较大的误差&#xff0c;因此我们在系统完成上电初始化&#xff0c;之后需要将STM32的时钟切换到外部HSE作为系统时钟&#xff0c;那么我…...

简单理解下基于 Redisson 库的分布式锁机制

目录 简单理解下基于 Redisson 库的分布式锁机制代码流程&#xff1a;方法的调用&#xff1a;具体锁的实现&#xff1a;riderBalance 方法&#xff1a;tryLock 方法&#xff08;重载&#xff09;&#xff1a;tryLock 方法&#xff08;核心实现&#xff09;&#xff1a; 简单理解…...

ruoyi框架完成分库分表,按月自动建表功能

前提 这个分库分表功能&#xff0c;按月自动建表&#xff0c;做的比较久了&#xff0c;还没上线&#xff0c;是在ruoyi框架内做的&#xff0c;踩了不少坑&#xff0c;但是已经实现了&#xff0c;就分享一下代码吧 参考 先分享一些参考文章 【若依系列】集成ShardingSphere S…...

数据结构 【单链表练习】

今天来探讨两个练习题要使用的思想为快慢指针。 1、返回链表的中间节点 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。如果有两个中间结点&#xff0c;则返回第二个中间结点。 整体思路如下图所示&#xff1a; 代码如下&#xff1a; /*** Definition f…...

wsl虚拟机中的dockers容器访问不了物理主机

1 首先保证wsl虚拟机能够访问宿主机IP地址&#xff0c;wsl虚拟机通过vEthernet (WSL)的地址访问&#xff0c;着意味着容器也要通过此IP地址访问物理主机。 2 遇到的问题&#xff1a;wsl虚拟机中安装了docker&#xff0c;用在用到docker容器内的开发环境&#xff0c;但是虚拟机…...

Elasticsearch 开放推理 API 增加了对 IBM watsonx.ai Slate 嵌入模型的支持

作者&#xff1a;来自 Elastic Saikat Sarkar 使用 Elasticsearch 向量数据库构建搜索 AI 体验时如何使用 IBM watsonx™ Slate 文本嵌入。 Elastic 很高兴地宣布&#xff0c;通过集成 IBM watsonx™ Slate 嵌入模型&#xff0c;我们的开放推理 API 功能得以扩展&#xff0c;这…...

【如何用更少的数据作出更好的决策】-gpt生成

如何用更少的数据作出更好的决策 用更少的数据作出更好的决策是一种能力的体现&#xff0c;需要结合有效的方法、严谨的逻辑以及对问题的深刻理解。以下是一些可以帮助你实现这一目标的策略&#xff1a; 明确目标 在收集和分析数据之前&#xff0c;先明确你的决策目标是什么…...

webview4/edgewebbrower学习记录——执行js

webview2可执行js方法&#xff1a;WVBrowser1.ExecuteScript(js, 1003) 参数1为js语句&#xff0c;参数2为命令号&#xff0c;执行完毕&#xff0c;会执行 procedure TBrowserFrame.WVBrowser1ExecuteScriptCompleted(Sender: TObject; aErrorCode: HRESULT; const aResultOb…...

Java文件上传解压

目录结构 工具类 枚举 定义文件类型 public enum FileType {// 未知UNKNOWN,// 压缩文件ZIP, RAR, _7Z, TAR, GZ, TAR_GZ, BZ2, TAR_BZ2,// 位图文件BMP, PNG, JPG, JPEG,// 矢量图文件SVG,// 影音文件AVI, MP4, MP3, AAR, OGG, WAV, WAVE}为了避免文件被修改后缀&#xff0…...

人工智能(AI)与机器学习(ML)基础知识

目录 1. 人工智能与机器学习的核心概念 什么是人工智能&#xff08;AI&#xff09;&#xff1f; 什么是机器学习&#xff08;ML&#xff09;&#xff1f; 什么是深度学习&#xff08;DL&#xff09;&#xff1f; 2. 机器学习的三大类型 &#xff08;1&#xff09;监督式学…...

autoware(2)运行自己的数据集

上一节完成了autoware.ai的安装和编译跑通了demo数据集&#xff0c;本将自己录制的数据包用于测试 1.修改点云地图 将加载点云地图的my_map.launch文件复制并命名为my_map_test.launch&#xff0c; &#xff08;1&#xff09;point cloud处替代原来的点云地图为自己的&#…...

HBase Java基础操作

Apache HBase 是一个开源的、分布式的、可扩展的大数据存储系统&#xff0c;它基于 Google 的 Bigtable 模型。使用 Java 操作 HBase 通常需要借助 HBase 提供的 Java API。以下是一个基本的示例&#xff0c;展示了如何在 Java 中连接到 HBase 并执行一些基本的操作&#xff0c…...

巧用观测云可用性监测(云拨测)

前言 做为系统运维或者开发&#xff0c;很多时候我们需要能够实时感知我们所运维的系统和服务的情况&#xff0c;比如以下的场景&#xff1a; 系统上线前测试&#xff1a;包括功能完整性检查&#xff0c;确保页面元素&#xff08;如图像、视频、脚本等&#xff09;都能够正常…...

Chrome离线安装包下载

1、问Chrome的官网&#xff1a;https://www.google.cn/chrome/ 直接下载的是在线安装包&#xff0c;安装需要联网。 2、如果需要在无法联网的设备上安装Chrome&#xff0c;需要在上面的地址后面加上?standalone1。 Chrome离线安装包下载地址&#xff1a;https://www.google.c…...

ceph的RBD管理

0 块设备介绍 Ceph 的块设备&#xff08;Ceph Block Device, RBD&#xff09;是其存储服务的一种实现形式&#xff0c;通过 librbd 库或 Linux 内核模块提供块设备支持&#xff0c;所以可以与主流云平台&#xff08;如 OpenStack&#xff09;、虚拟化平台&#xff08;如 KVM&a…...

【数论】莫比乌斯函数及其反演

文章目录 一、介绍二、莫比乌斯函数的算法求解三、例题 在学习之前&#xff0c;先来了解一下常见定义吧&#xff08;OVO&#xff09;&#xff1a; 常见数论函数分为两种&#xff1a; { 完全积性函数&#xff1a;对于任意 p , q ∈ N &#xff0c;有 f ( p ⋅ q ) f ( p ) ⋅ …...

低音运行,约克VRF中央空调让居家生活静享安宁

不仅节能省电&#xff0c;约克VRF中央空调还特别注重运行的静音效果&#xff0c;低至17dB超低运行噪音&#xff0c;让你在享受舒适环境的同时&#xff0c;也能拥有宁静的居家氛围。无论是工作、学习还是休息&#xff0c;都不受噪音干扰。...

使用 Ansys LS-DYNA 进行玻璃瓶包装跌落分析

使用 Ansys LS-DYNA 进行玻璃瓶包装跌落分析 玻璃瓶包装跌落分析 使用两个玻璃瓶&#xff0c;其中一个为纸盒包装&#xff0c;用来演示包装效果。 Johnson–Holmquist 损伤模型用于玻璃 (MAT_JOHNSON_HOLMQUIST_CERAMICS)纸箱包装采用各向同性弹性材料模型。瓶子将从 300 毫米…...

Windows系统编程 - 进程遍历

文章目录 前言进程的遍历CreateToolhelp32SnapshotProcess32FirstProcess32Next进程遍历 总结 前言 各位师傅好&#xff0c;我是qmx_07&#xff0c;今天给大家讲解进程遍历的相关知识点 进程的遍历 快照&#xff1a;使用vmware虚拟机的时候&#xff0c;经常需要配置环境服务…...

【电路笔记 TMS320F28335DSP】时钟+看门狗+相关寄存器(功能模块使能、时钟频率配置、看门狗配置)

时钟源和主时钟&#xff08;SYSCLKOUT&#xff09; 外部晶振&#xff1a;通常使用外部晶振&#xff08;如 20 MHz&#xff09;作为主要时钟源。内部振荡器&#xff1a;还可以选择内部振荡器&#xff08;INTOSC1 和 INTOSC2&#xff09;&#xff0c;适合无需高精度外部时钟的应…...

gt730是什么显卡?gt730显卡性能参数介绍

NVIDIA GeForce GT 730是一款入门级图形卡&#xff0c;于2014年推出&#xff0c;基于40纳米工艺和GF108图形处理器。尽管它支持DirectX 12&#xff0c;但功能级别仅为11_0&#xff0c;这可能会在新的DirectX 12标题中造成问题。GT 730具有96个着色单元&#xff0c;16个纹理映射…...

Swift内存访问冲突

内存的访问&#xff0c;发生在给变量赋值的时候&#xff0c;或者传递值&#xff08;给函数&#xff09;的时候&#xff0c;例如 var one 1//向one的内存区域发起一次写的操作 print("\(one)")//向one的内存区域发起一次读的操作 在 Swift 里&#xff0c;有很多修改…...

2024.6使用 UMLS 集成的基于 CNN 的文本索引增强医学图像检索

Enhancing Medical Image Retrieval with UMLS-Integrated CNN-Based Text Indexing 问题 医疗图像检索中&#xff0c;图像与相关文本的一致性问题&#xff0c;如患者有病症但影像可能无明显异常&#xff0c;影响图像检索系统准确性。传统的基于文本的医学图像检索&#xff0…...

力扣刷题--21.合并两个有序链表

I am the best &#xff01;&#xff01;&#xff01; 题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] 示例 2…...

Diving into the STM32 HAL-----DAC笔记

根据所使用的系列和封装&#xff0c;STM32微控制器通常只提供一个具有一个或两个专用输出的DAC&#xff0c;除了STM32F3系列中的少数零件编号实现两个DAC&#xff0c;第一个具有两个输出&#xff0c;另一个只有一个输出。STM32G4 系列的一些较新的 MCU 甚至提供多达 5 个独立的…...

每日一题 LCR 078. 合并 K 个升序链表

LCR 078. 合并 K 个升序链表 使用二分法就可以解决 class Solution { public:ListNode* mergeKLists(vector<ListNode*>& lists) {int n lists.size();if(n 0){return nullptr;}ListNode* ans ;ans binMerge(lists,0,n-1);return ans;}ListNode* binMerge(vector…...

如何在分布式环境中实现高可靠性分布式锁

目录 一、简单了解分布式锁 &#xff08;一&#xff09;分布式锁&#xff1a;应对分布式环境的同步挑战 &#xff08;二&#xff09;分布式锁的实现方式 &#xff08;三&#xff09;分布式锁的使用场景 &#xff08;四&#xff09;分布式锁需满足的特点 二、Redis 实现分…...

如何利用java爬虫获得淘宝商品评论

在当今数字化时代&#xff0c;数据的价值日益凸显&#xff0c;尤其是对于电商平台而言&#xff0c;商品评论作为用户反馈的重要载体&#xff0c;蕴含着丰富的信息。本文将详细介绍如何利用Java爬虫技术获取淘宝商品评论&#xff0c;包括代码示例和关键步骤解析。 淘宝商品评论的…...

SQLAlchemy,ORM的Python标杆!

嗨&#xff0c;Python的小伙伴们&#xff01;今天咱们来了解 SQLAlchemy&#xff0c;这可是对象关系映射&#xff08;ORM&#xff09;里的超级标杆哦&#xff01;它就像一座神奇的桥梁&#xff0c;能让我们用 Python 代码轻松地和数据库打交道&#xff0c;不用写复杂的 SQL 语句…...

时序论文23|ICML24谷歌开源零样本时序大模型TimesFM

论文标题&#xff1a;A DECODER - ONLY FOUNDATION MODEL FOR TIME - SERIES FORECASTING 论文链接&#xff1a;https://arxiv.org/abs/2310.10688 论文链接&#xff1a;https://github.com/google-research/timesfm 前言 谷歌这篇时间序列大模型很早之前就在关注&#xff…...

java http body的格式 ‌application/x-www-form-urlencoded‌不支持文件上传

在Java中&#xff0c;HTTP请求的body部分可以包含多种格式的数据&#xff0c;主要包括以下几种‌&#xff1a; ‌application/x-www-form-urlencoded‌&#xff1a;这种格式将数据编码成键值对的形式&#xff0c;键和值都进行了URL编码&#xff0c;键值对之间用&符号连接。…...

【头歌实训:利用kmp算法求子串在主串中不重叠出现的次数】

头歌实训&#xff1a;利用kmp算法求子串在主串中不重叠出现的次数 文章目录 任务描述编程要求测试说明输入格式输出格式样例输入1样例输出1样例输入2样例输出2 源代码&#xff1a; 任务描述 本关任务&#xff1a;编写一个程序&#xff0c;利用kmp算法求子串在主串中不重叠出现…...

WPF动画

在 WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;主要有两种类型的动画&#xff1a;属性动画&#xff08;Property Animation&#xff09;和关键帧动画&#xff08;Key - Frame Animation&#xff09;。属性动画用于简单地从一个起始值平滑地过渡…...

Kafka 分区分配及再平衡策略深度解析与消费者事务和数据积压的简单介绍

Kafka&#xff1a;分布式消息系统的核心原理与安装部署-CSDN博客 自定义 Kafka 脚本 kf-use.sh 的解析与功能与应用示例-CSDN博客 Kafka 生产者全面解析&#xff1a;从基础原理到高级实践-CSDN博客 Kafka 生产者优化与数据处理经验-CSDN博客 Kafka 工作流程解析&#xff1a…...

如何在 UniApp 中实现 iOS 版本更新检测

随着移动应用的不断发展&#xff0c;保持应用程序的更新是必不可少的&#xff0c;这样用户才能获得更好的体验。本文将帮助你在 UniApp 中实现 iOS 版的版本更新检测和提示&#xff0c;适合刚入行的小白。我们将分步骤进行说明&#xff0c;每一步所需的代码及其解释都会一一列出…...

Android 14.0 kenel中修改rom系统内部存储的大小

1. 前言 在14.0的系统rom产品开发定制中,在对一些产品开发中的配置需求方面,由于在产品后续订单中,有些产品是出口的,但是硬件方面已经定板,时间比较仓促,所以 就需要软件方面在rom内部存储的大小方面作假,修改rom真实的大小容量,所以就需要在kenel驱动部分来修改这部分…...

JavaScript 函数

JavaScript中也可以使用函数&#xff0c;但是使用的方法有些不同&#xff1b;需要使用function关键字定义一个函数&#xff08;或者使用匿名函数或者箭头函数&#xff09;。但是需要特别注意的是&#xff1a;在类中定义函数时&#xff0c;一定不可以使用箭头函数&#xff0c;因…...

js+new Date()+moment+时区

文章目录 概要一、Date对象基础知识1. 创建Date对象2. 获取日期和时间信息3. 设置日期和时间 二、Date对象的应用1. 日期格式化2. 时间差计算3. 倒计时功能 moment.jsmoment 常见场景应用时区差别亚洲欧洲美洲大洋洲 时区时间说明 概要 一、Date对象基础知识 1. 创建Date对象…...

OpenCV、YOLO、VOC、COCO之间的关系和区别

OpenCV、YOLO、COCO 和 VOC 是计算机视觉和深度学习领域常见的几个名词&#xff0c;它们分别代表不同的工具、算法和数据集&#xff0c;之间有一些联系和区别。下面分别说明它们的定义、用途以及相互关系。 1. OpenCV&#xff08;Open Source Computer Vision Library&#xf…...

迁移学习理论与应用

迁移学习&#xff08;Transfer Learning&#xff09;是一种机器学习技术&#xff0c;旨在将一个任务&#xff08;源任务&#xff09;上学到的知识迁移到另一个相关但不完全相同的任务&#xff08;目标任务&#xff09;上&#xff0c;从而提高目标任务的学习效果。这种方法的核心…...

Python-简单病毒程序合集(一)

前言&#xff1a;简单又有趣的Python恶搞代码&#xff0c;往往能给我们枯燥无味的生活带来一点乐趣&#xff0c;激发我们对编程的最原始的热爱。那么话不多说&#xff0c;我们直接开始今天的编程之路。 编程思路&#xff1a;本次我们将会用到os,paltform,threading,ctypes,sys,…...

AI安全:从现实关切到未来展望

近年来&#xff0c;人工智能技术飞速发展&#xff0c;从简单的图像识别到生成对话&#xff0c;从自动驾驶到医疗诊断&#xff0c;AI技术正深刻改变着我们的生活。然而&#xff0c;伴随着这些进步&#xff0c;AI的安全性和可控性问题也日益凸显。这不仅涉及技术层面的挑战&#…...