<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[CodingNoob]]></title><description><![CDATA[路漫漫其修远兮，吾将上下而求索。]]></description><link>https://blog.youkuaiyun.com/CodingNoob</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; CodingNoob]]></copyright><item><title><![CDATA[网页布局css中flex+margin的组合布局技巧]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/169638586</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/169638586</guid><author>CodingNoob</author><pubDate>Sat, 31 Oct 2026 11:45:24 +0800</pubDate><description><![CDATA[本文介绍了利用Flexbox与margin:auto组合实现高效布局的技巧。通过在弹性项上设置margin:auto，可自动“吃掉”剩余空间，轻松实现居中、等分及多列布局，无需繁琐的justify-content和align-items设置。例如，单侧margin-left:auto实现右对齐，左右margin:auto实现水平居中，中间元素设margin:0 auto实现三等分。对于多等分布局，结合CSS变量动态计算间距，代码简洁且可复用，显著提升开发效率。]]></description><category></category></item><item><title><![CDATA[js判断鼠标在元素中移入的方向demo]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/166845992</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/166845992</guid><author>CodingNoob</author><pubDate>Tue, 29 Sep 2026 17:05:14 +0800</pubDate><description><![CDATA[本文通过JavaScript实现鼠标移入元素方向的判断，核心原理是基于坐标系计算鼠标进入时的夹角。利用clientX、clientY与元素中心点的相对位置，通过Math.atan()求出角度，并根据象限修正角度值。结合对角线角度划分区域，判断鼠标从上、下、左、右哪个方向进入元素，动态添加对应类名触发动画效果，实现精准的方向识别。]]></description><category></category></item><item><title><![CDATA[vue3.0 开发CesiumJS 3D 场景编辑器（支持源码）]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/162873115</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/162873115</guid><author>CodingNoob</author><pubDate>Tue, 14 Jul 2026 14:17:55 +0800</pubDate><description><![CDATA[基于 Vue3 + Element Plus + CesiumJS 构建的 3D 场景编辑器，提供模型管理、标记管理、绘制管理、天气模拟等功能，支持数据保存与预览。]]></description><category></category></item><item><title><![CDATA[基于uni-app+vue3+uview开发一款日常记账本应用app]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/162462611</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/162462611</guid><author>CodingNoob</author><pubDate>Tue, 30 Jun 2026 18:52:58 +0800</pubDate><description><![CDATA[小账本是一款基于uni-app框架开发的个人记账应用，支持H5和小程序多端运行。系统采用Vue3+Pinia技术栈，使用IndexedDB实现本地数据持久化。核心功能包括：多维度收支记录、心情追踪、统计分析（收支/分类/心情）等。应用包含首页、记账、日历、统计、分类管理等模块，首页展示收支总览和快捷入口，记账模块支持记录的增删改查。技术架构采用模块化设计，包含状态管理、数据库封装和工具函数等核心模块。项目要求Node.js 18+环境，具有简洁易用、数据安全、多端兼容等特点。]]></description><category></category></item><item><title><![CDATA[vue3基于leaflet.js实现地图编辑功能]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/162041944</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/162041944</guid><author>CodingNoob</author><pubDate>Tue, 16 Jun 2026 17:41:18 +0800</pubDate><description><![CDATA[本项目是一个基于Vue3+Vant+Leaflet的移动端地图编辑器，主要功能包括地图展示（支持标准/卫星地图切换）、多种图形绘制（折线/多边形/矩形/圆形/标记点）、图形编辑与删除、GeoJSON数据导入导出。技术栈采用Node.js 22.x环境，Vite构建工具，集成Leaflet.draw绘图插件。项目包含智能问答模块、地图编辑器主模块以及多个测试组件，支持移动端适配和现代浏览器。文档详细说明了功能模块、API接口、配置方法、运行要求以及已知问题的解决方案。]]></description><category></category></item><item><title><![CDATA[js实现视频播放画中画模式]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/161928418</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/161928418</guid><author>CodingNoob</author><pubDate>Fri, 12 Jun 2026 15:14:07 +0800</pubDate><description><![CDATA[这是一个视频画中画(PiP)模式的演示页面，主要功能包括：1.检测浏览器是否支持画中画功能；2.提供视频播放/暂停控制；3.实现画中画模式的切换功能。页面包含美观的UI设计，采用卡片式布局和渐变色背景，具有响应式特性。使用说明详细解释了如何操作：先播放视频，再切换到画中画模式，该模式下视频可独立窗口显示并继续播放。页面通过JavaScript监听画中画状态变化，实时更新界面显示。不支持该功能的浏览器会显示提示信息。]]></description><category></category></item><item><title><![CDATA[基于vue3.0开发一款【固废与废气运维管理系统】（支持源码）]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/161864928</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/161864928</guid><author>CodingNoob</author><pubDate>Wed, 10 Jun 2026 16:16:36 +0800</pubDate><description><![CDATA[固废与废气管理系统功能摘要 本系统是工业企业环境管理综合平台，提供固废与废气的全流程数字化管理。系统包含废气监测管理模块，支持有组织/无组织废气排口实时监测、治理设施运维和合规台账；固废管理模块覆盖产废、贮存、转移、处置全生命周期，支持电子联单和资源化追踪；预警系统实现多维度分级告警配置与闭环处置。系统还提供物联网设备管理、数据可视化大屏、统计分析及系统管理功能，满足企业环保合规与智能化管理需求，实现环境数据的实时监控、预警响应和报表自动生成。]]></description><category></category></item><item><title><![CDATA[小学三年级语文小游戏]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/161801868</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/161801868</guid><author>CodingNoob</author><pubDate>Mon, 08 Jun 2026 15:25:40 +0800</pubDate><description><![CDATA[这篇文章摘要： &quot;语文小达人·三年级闯关&quot;是一个针对三年级学生的语文学习互动网页应用。该应用采用游戏化设计，提供四种趣味闯关模式：1)拼音配对（匹配汉字与正确拼音）2)组词挑战（用给定字组成词语）3)选词填空（选择合适词语完成句子）4)反义词配对（识别意思相反的词语）。界面设计采用卡片式布局和渐变色背景，包含得分统计和连对奖励机制。游戏过程中会即时反馈正确答案，并根据表现给予鼓励性评语。所有题目均围绕三年级语文知识点设计，如&quot;春天&quot;、&quot;认真&quot;等基础]]></description><category></category></item><item><title><![CDATA[vue3.0开发一款基于AI 中小学作文批改系统（支持源码）]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/161654265</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/161654265</guid><author>CodingNoob</author><pubDate>Wed, 03 Jun 2026 13:33:37 +0800</pubDate><description><![CDATA[是一款基于 Vue 3 + Element Plus 开发的智能作文批改系统，集成阿里云 DashScope AI 视觉模型，能够以语文老师的视角对学生作文进行全面批改，包括错别字标注、结构点评、综合评分和润色建议等功能。]]></description><category></category></item><item><title><![CDATA[vue3.0基于threejs实现GLTF 在线编辑器V1.0版本（支持源码）]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/161538256</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/161538256</guid><author>CodingNoob</author><pubDate>Sat, 30 May 2026 11:55:02 +0800</pubDate><description><![CDATA[GLTF在线编辑器是一款基于Web的3D模型编辑工具，支持GLB/GLTF格式的模型上传、预览和编辑。该工具采用Vue3+Three.js技术栈，提供模型变换、场景管理、数据标记、光照调节等核心功能。系统架构包含Vue应用层、Three.js渲染层和UI组件层，支持主流现代浏览器。编辑器具有直观的可视化界面，可实现模型位置/旋转/缩放调整、天空环境切换、2D/3D标记管理等功能，适合3D设计师和开发者使用。]]></description><category></category></item><item><title><![CDATA[vue3 基于AntV X6 流程图设计编辑器v2.0版本]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/161391650</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/161391650</guid><author>CodingNoob</author><pubDate>Mon, 25 May 2026 13:46:10 +0800</pubDate><description><![CDATA[本文介绍了基于Vue3和AntV X6开发的流程图设计编辑器v1.2版本。该系统采用经典三栏布局，包含顶部工具栏、左侧面板、画布区域和右侧属性面板。主要功能包括：拖拽式节点创建、12类150+行业图标库、自定义图标上传、节点属性编辑、连接线动画效果、画布预览等。左侧面板提供基础流程图、系统设计图、工业/电气/机械/农业/医疗等专业图标分组，支持图标上传管理。系统采用Vue3+AntV X6+Element Plus技术栈，适用于业务流程设计、系统架构规划等场景。]]></description><category></category></item><item><title><![CDATA[html浏览器自动播放视频策略]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/159385502</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/159385502</guid><author>CodingNoob</author><pubDate>Mon, 23 Mar 2026 13:39:45 +0800</pubDate><description><![CDATA[为平衡用户体验 与开发者需求，现代浏览器（如Chrome）对视频自动播放（autoplay）功能设置了严格限制。未经用户交互的强制播放可能导致用户反感，因此浏览器 通过静音策略、媒体参与度（MEI）等机制动态控制自动播放权限。顶级窗口若已获得自动播放权限，可通过allow="autoplay"属性将权限传递给子iframe，但实际场景中此功能受限（父窗口自身权限不足时无法传递）。若视频设置为静音（muted属性），浏览器允许自动播放，无需用户交互。站点安装为PWA或主屏幕应用：用户主动安装表明信任该站点。]]></description><category></category></item><item><title><![CDATA[sass利用混合抽离媒体查询公共部分代码]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/159009959</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/159009959</guid><author>CodingNoob</author><pubDate>Fri, 13 Mar 2026 14:44:57 +0800</pubDate><description><![CDATA[本文介绍了使用Sass的@mixin功能优化响应式设计的方法。通过定义$device-breakpoints变量集中管理设备断点，并创建adaptDevice混合宏来简化媒体查询的编写。使用时只需传入设备名称即可自动应用对应的样式规则，避免了重复编写媒体查询代码，提高了样式的可维护性。当需要修改或新增分辨率时，只需在断点配置中调整一次，而不必多处修改，大大提升了开发效率。这种方法特别适合需要适配多种屏幕尺寸的项目。]]></description><category></category></item><item><title><![CDATA[vue基于antv g6实现带流动动画的组织结构图]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/155321450</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/155321450</guid><author>CodingNoob</author><pubDate>Thu, 27 Nov 2025 18:50:28 +0800</pubDate><description><![CDATA[【代码】vue基于antv g6实现带流动动画的组织结构图。]]></description><category></category></item><item><title><![CDATA[网页Iframe读取PDF文件的参数设置]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/154561899</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/154561899</guid><author>CodingNoob</author><pubDate>Sat, 08 Nov 2025 09:24:34 +0800</pubDate><description><![CDATA[本文介绍了在网页中使用iframe加载PDF文件的方法及参数设置。通过在iframe的src属性中添加pdf地址和参数，可以控制PDF的显示效果，包括缩放级别（zoom）、指定页码（page）、显示模式（view）、旋转角度（rotate）等。还支持工具栏（toolbar）、菜单栏（menubar）、导航窗格（navpanes）等界面元素的显隐控制，以及搜索（search）、注释（comment）、全屏（fullscreen）等功能设置。各参数可通过&quot;#&quot;符号连接组合使用，如&quot;]]></description><category></category></item><item><title><![CDATA[基于transform的scale属性，实现数据可视化大屏自适应缩放适配不同分辨率]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/153832328</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/153832328</guid><author>CodingNoob</author><pubDate>Fri, 24 Oct 2025 16:10:31 +0800</pubDate><description><![CDATA[摘要：本文介绍了一种实现自适应数据可视化大屏的解决方案。针对16:9设计稿(1920*1080)在不同屏幕下的适配问题，提出基于transform的scale缩放方案。通过计算屏幕宽高比，在更宽屏幕时以高度为基准缩放，更高屏幕时以宽度为基准缩放，并使用transform-origin调整缩放中心点。该方法可保持设计比例不变，屏幕比例不一致时两边留白，实现任意屏幕下的自适应显示。文中提供了完整的HTML/CSS/JS代码示例，包括容器结构、缩放计算逻辑和样式处理，解决了开发者需频繁调整浏览器缩放的问题。]]></description><category></category></item><item><title><![CDATA[web浏览器打开本地系统应用软件html代码]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/148057985</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/148057985</guid><author>CodingNoob</author><pubDate>Mon, 19 May 2025 10:39:51 +0800</pubDate><description><![CDATA[在平时开发过程中，我们经常碰到一些网站或者页面点击某个连接即可打开某个页面，比如点击链接地址，打开百度网盘下载，点击链接地址，跳转到迅雷下载等，这个是如何实现的呢？]]></description><category></category></item><item><title><![CDATA[vue封装弹窗元素拖动指令]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/144816603</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/144816603</guid><author>CodingNoob</author><pubDate>Mon, 30 Dec 2024 12:46:51 +0800</pubDate><description><![CDATA[项目开发过程中我们通常会遇到需要到一些弹窗鼠标可以随意拖动位置去放置，vue里面直接通过封装对应的指令即可，于是封装了一个出来，希望可以用到。]]></description><category></category></item><item><title><![CDATA[vue基于高德地图实现城市管网压力点、管线、测距、测面积、绘制多边形、绘制圆代码]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/143973248</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/143973248</guid><author>CodingNoob</author><pubDate>Fri, 22 Nov 2024 14:21:11 +0800</pubDate><description><![CDATA[基于高德地图研究了下管线和压力点、管线名称实现的逻辑，输出了一个简单的demo]]></description><category></category></item><item><title><![CDATA[vue 基于antV 实现流程图编辑器代码]]></title><link>https://blog.youkuaiyun.com/CodingNoob/article/details/139856951</link><guid>https://blog.youkuaiyun.com/CodingNoob/article/details/139856951</guid><author>CodingNoob</author><pubDate>Fri, 21 Jun 2024 11:45:06 +0800</pubDate><description><![CDATA[最近在做流程图功能开发，发现阿里antV 有对应的可视化引擎，于是自己做了一个简单vue 基于antV 实现流程图编辑器代码。]]></description><category></category></item></channel></rss>