洛丽糖 - js
type: channel
link: https://www.luolt.cn/tag/js/
items: 一款不错的额404错误页面源码
items: (AI出品，必须能跑)自动填充用户评论信息
items: 一款实用免费开源的封面生成工具源码
items: 在线 SQL 语句生成器：可视化配置，零基础也能写 SQL
items: 图片转base64在线生成器源码
items: 通过AI编写的原生JS弹窗气泡
items: 通过原生js简单实现手风琴效果
items: 台式，笔记本，平板，手机多端一键截图源码
items: 通过js暴力实现图片ALT属性显示
items: 通过JS暴力实现生成缩略图通过base64输出

一款不错的额404错误页面源码
type: item
date: 2026-03-02T11:54:56+08:00
description: 这一款不错的404页面是博主的一个域名没有正确解析后，访问发现的，看着不错就个保存了下来，以后可能用得到。 404 - 页面未找到 系统提示 Website Error 站点未找到或状态异常 可能的原因如下，请逐项排查： 主机控制面板未绑定域名（请确认 www 和 @ 已分别绑定）。 域名解析错误，请检查您的域名 DNS 解析记录是否正确。 产品到期时间过长，当前域名可能已被解除绑定。 诊断信息 <rect x="9" y="9" width="10" height="10" rx="2" stroke="currentColor" stroke-width="2"/> <rect x="5" y="5" width="10" height="10" rx="2" stroke="currentColor" stroke-width="2" opacity=".6"/> 复制 出错时间 — 出错 URL — <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"></circle> <path d="M12 7.5v.1m0 3.4v5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path> 提示：如有必要，请将上述诊断信息记录并提供给技术人员处理。 <path d="M20 7v6h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M20 13a8 8 0 1 1-2.34-5.66L20 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 刷新页面 404 <defs> <pattern id="dots" width="16" height="16" patternUnits="userSpaceOnUse"> <circle cx="1" cy="1" r="1" fill="#E6EEFA"/> </pattern> <linearGradient id="grad" x1="0" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#2563EB"/> <stop offset="100%" stop-color="#1E48CC"/> </linearGradient> </defs> <rect x="0" y="0" width="800" height="260" fill="url(#dots)"/> <g transform="translate(188,120) rotate(-14)"> <rect x="-60" y="-22" rx="16" ry="16" width="200" height="44" fill="#FFFFFF" stroke="#CFE0FF" stroke-width="3"/> <rect x="-46" y="-10" rx="9" ry="9" width="172" height="20" fill="#F3F8FF" stroke="#DCE8FF"/> </g> <g transform="translate(502,120) rotate(14)"> <rect x="-60" y="-22" rx="16" ry="16" width="200" height="44" fill="#FFFFFF" stroke="#CFE0FF" stroke-width="3"/> <rect x="-46" y="-10" rx="9" ry="9" width="172" height="20" fill="#F3F8FF" stroke="#DCE8FF"/> </g> <path d="M394 94 L410 122 L392 134 L408 160" fill="none" stroke="url(#grad)" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="392" cy="134" r="3" fill="#2563EB"/> <circle cx="404" cy="118" r="2" fill="#2563EB" opacity=".7…

(AI出品，必须能跑)自动填充用户评论信息
type: item
date: 2026-02-04T10:42:00+08:00
description: 用户首次评论提交后，保存其名称、邮箱等信息，下次再进入评论页面（或刷新后），自动将保存的信息填充到对应的输入框中。 自动填充用户评论信息 评论区 姓名： 邮箱： 评论内容： 提交评论 代码关键部分解释localStorage 的使用localStorage.setItem(key, value)：用于存储数据，key 是存储的键名，value 只能是字符串类型，因此我们用 JSON.stringify() 将用户信息对象转换为字符串。localStorage.getItem(key)：用于获取指定键名存储的数据，返回值是字符串，因此需要用 JSON.parse() 转换回 JavaScript 对象，方便提取数据。存储键名定义为常量 COMMENT_USER_INFO_KEY，后续如果需要修改键名，只需修改这一个常量即可，提升可维护性。页面加载自动填充利用 window.onload 事件，确保页面所有 DOM 元素加载完成后再执行填充逻辑，避免获取不到输入框元素。先判断是否存在已保存的信息，存在才进行填充，避免出现 undefined 等异常。表单验证与数据保存提交时先去除输入框值的前后空格（trim()），避免用户输入无效的空白内容。只保存姓名和邮箱，评论内容不保存，符合用户使用习惯（用户每次评论的内容大概率不同）。提交成功后清空评论内容输入框，保留姓名和邮箱，方便用户再次提交新评论。

一款实用免费开源的封面生成工具源码
type: item
date: 2025-12-25T21:08:00+08:00
description: 一款实用的磨砂透明背景封面生成工具：轻松搞定高颜值封面设计封面生成截图工具界面截图在内容创作的浪潮中，一张精致的封面图往往是吸引读者目光的第一道门槛。无论是文章配图、视频封面，还是社交平台分享图，高颜值的封面都能让你的内容在海量信息中脱颖而出。但对于大多数非设计专业的创作者来说，使用专业设计软件制作封面不仅门槛高，还十分耗时。基于此，我开发了一款磨砂透明背景封面生成工具，无需专业设计技能，只需简单几步操作，就能生成质感满满的磨砂透明风格封面。今天就来详细聊聊这款工具的功能、使用方法和技术亮点。一、工具核心功能：满足多场景封面制作需求这款工具以“简单易用、功能全面”为核心设计理念，涵盖了从素材上传到参数微调，再到封面生成与下载的全流程功能，具体可分为以下几大模块：多格式素材上传支持工具兼容多种主流素材格式，无论是图片（JPG、PNG、GIF、WebP）还是视频（MP4），都能直接上传作为封面背景。对于视频素材，工具会自动提取视频帧作为背景基础，解决了视频创作者制作封面的痛点，无需额外截取视频画面。灵活的尺寸与比例设置针对不同平台的封面尺寸要求，工具提供了两种尺寸设置方式：一是自定义宽度和高度（范围10-2000px），精准匹配个性化需求；二是预设多种主流比例（1:1正方形、4:3经典、16:9宽屏、9:16竖屏等），覆盖文章、视频、社交动态等常见使用场景，无需手动计算比例，一键切换即可。质感磨砂风格自定义磨砂透明是这款工具的核心风格，用户可通过参数微调打造专属质感：背景透明度调节（0-1）：控制底层背景的显示程度，打造若隐若现的通透感；自定义背景色：支持纯色背景与磨砂效果结合，可通过取色器精准选择颜色；滤镜效果：内置黑白、复古、提亮、高对比度、轻微模糊等多种滤镜，快速切换封面氛围；磨砂背景透明度：单独调节磨砂层的透明度，进一步优化质感表现。全方位文本编辑功能封面文字是传递核心信息的关键，工具提供了丰富的文本编辑选项，满足不同排版需求：多文本类型支持：可添加文章标题、文章介绍、创作者昵称三类文本，覆盖主流封面信息展示需求；字体样式自定义：每类文本的字体大小、颜色均可独立调节，标题支持加粗显示，增强视觉层级；文本背景优化：为文本添加独立背景，支持背景色、透明度、圆角调节，让文字在复杂背景中更清晰，同时呼应磨砂整体风格；对齐与间距调节：文本支持居中、居左、居右三种对齐方式，可设置文本内边距、头像与昵称间距，优化排版细节。头像与位置精细化控制对于需要展示创作者身份的封面，工具支持头像上传与预览功能，头像自动裁剪为圆形，贴合主流设计风格。同时，提供7种头像与昵称的位置组合（底部右/左/居中、顶部右/左/居中、正中间），并支持边距偏移调节，可精准定位到理想位置。实时预览与一键下载所有参数调节都能实时在画布中预览效果，避免盲目操作。生成满意的封面后，可设置图片质量（0.1-1），一键下载为JPG格式，直接用于内容发布，高效便捷。此外，工具还提供“重新制作”功能，可快速重置所有参数，重新创作。二、使用流程：3步搞定高颜值封面这款工具的操作逻辑简单清晰，即使是第一次使用，也能快速上手，核心流程仅需3步：第一步：上传素材点击或拖拽文件到上传区域，选择准备好的背景图或MP4视频。上传成功后，工具会自动识别素材类型，展示原始尺寸信息，并解锁后续控制参数面板。第二步：调节参数与排版根据需求设置封面尺寸（或选择预设比例），调节背景透明度、滤镜等磨砂风格参数；输入文章标题、介绍、昵称等文本内容，自定义字体大小、颜色与文本背景；上传头像并选择合适的位置布局，通过实时预览优化细节。第三步：生成与下载确认预览效果满意后，点击“生成封面”按钮，工具会完成最终渲染；随后设置图片质量，点击“下载封面”即可保存成品，整个过程耗时不超过5分钟。三、技术亮点：兼顾易用性与性能在技术实现上，工具基于HTML5 Canvas实现核心的绘图与渲染功能，结合JavaScript完成交互逻辑，确保在不同浏览器中都能稳定运行。主要技术亮点包括：Canvas实时渲染：所有参数调节均通过Canvas API动态绘制，实现无延迟预览，提升操作体验；视频帧提取：针对MP4视频素材，通过HTML5 Video元素加载视频，提取关键帧作为背景，无需后端处理，纯前端完成；文本智能处理：内置文本强制换行与截断逻辑，当文本长度超出设定宽度时，自动换行或添加省略号，保证排版美观；响应式布局：控制面板采用网格布局（Grid），适配不同屏幕尺寸，在电脑、平板等设备上都能正常操作。四、适用人群与场景这款磨砂透明背景封面生成工具的适用场景十分广泛，尤其适合以下人群：自媒体创作者：快速制作文章封面、公众号头图，提升内容专业度；视频博主：提取视频帧制作封面，添加标题与昵称，吸引平台流量；职场人士：制作PPT封面、报告配…

在线 SQL 语句生成器：可视化配置，零基础也能写 SQL
type: item
date: 2025-12-20T19:17:00+08:00
description: 这款纯前端在线SQL生成器是为开发人员、运维人员和数据库初学者打造的轻量化工具，无需后端环境、无需安装软件，仅需浏览器打开即可使用。它将复杂的SQL语法转化为可视化配置项，覆盖增删改查全场景，还集成了JOIN联查、语法校验、模板套用、注释生成、模拟执行预览等实战功能，既能提升开发效率，又能降低手写SQL的出错率，是数据库操作的高效辅助工具。核心亮点零门槛使用，可视化配置无需记忆复杂SQL语法，通过选择操作类型、填写表名、配置字段/条件，即可自动生成标准SQL语句。字段支持类型选择（数字/字符串/日期），自动适配引号，避免语法错误。完整JOIN联查支持，多表操作无忧内置INNER JOIN（内联）、LEFT JOIN（左联）、RIGHT JOIN（右联）三种联查类型，支持多表逗号分隔配置，关联条件直接填写，轻松实现多表关联查询。6大常用SQL模板，一键套用内置模糊查询（LIKE）、批量插入、范围查询（IN）、区间查询（BETWEEN）、统计查询（COUNT）、求和查询（SUM）等高频模板，省去重复编写基础SQL的时间。SQL语法精准校验，规避错误内置前端语法校验规则，自动检测增删改查语句的合法性，非法语句标红提示，提前规避语法错误导致的执行失败。自动注释生成，规范代码按操作类型自动生成语义化注释，删改操作额外添加风险提醒（如DELETE不可逆、UPDATE无WHERE更新全表），同时支持手动编辑，提升SQL代码的可维护性。模拟执行预览，提前预判效果SELECT语句返回模拟表格数据（含字段表头+测试数据），增删改语句返回执行结果提示，无需连接数据库即可预判操作效果，降低真实环境操作风险。轻量化纯前端，跨平台可用基于原生HTML+CSS+JS开发，无框架依赖，支持Windows、Mac、Linux等系统，手机端也能适配使用，保存单个HTML文件即可离线运行。功能清单功能模块具体能力基础操作支持SELECT（查询）、INSERT（新增）、UPDATE（修改）、DELETE（删除）高级查询排序（ORDER BY）、分页（LIMIT）、多表JOIN联查字段配置字段增删、类型选择、表前缀支持（如user.id）工具辅助SQL格式化、一键复制、语法校验、自动注释、配置清空模板中心6大常用SQL模板，一键套用并支持自定义修改预览功能模拟执行结果预览（表格/执行提示）安全防护危险字符过滤（防注入）、删改操作风险提醒适用人群数据库初学者：无需手写SQL，通过配置快速理解SQL语法逻辑开发人员：提升日常SQL编写效率，减少重复劳动运维人员：快速生成标准SQL，降低数据库操作风险办公人员：简单配置即可实现数据查询/新增，无需技术背景使用方式复制代码保存为sql-builder.html文件，用浏览器直接打开选择操作类型（如SELECT查询），填写主表名按需配置字段、查询条件、排序/分页，或开启JOIN联查配置多表点击「生成SQL」得到语句，可进一步格式化、加注释、校验语法点击「模拟执行预览」查看效果，满意后一键复制使用项目代码{hide} 终极版SQL生成器（注释+预览+JOIN+校验+模板） 终极版SQL生成器（注释+预览+JOIN+校验+模板） 操作类型： SELECT 查询（JOIN联查+排序+分页） INSERT 新增 UPDATE 修改 DELETE 删除 主数据表名： 开启JOIN联查（多表必备） 联查类型： INNER JOIN（内联，取交集） LEFT JOIN（左联，主表全显） RIGHT JOIN（右联，联查表全显） 关联表名： 关联条件（例：user.id=order.uid AND order.gid=goods.id）： 多表联查依次写关联条件，用AND连接 字段配置： 普通字段 数字 字符串 日期 + - 查询条件（WHERE）： 100，无需写WHERE"> 排序（ORDER BY）： 分页（LIMIT）： 调用常用SQL模板 选择模板： -- 选择常用模板 -- 模糊查询（LIKE） 批量新增（多条INSERT） 范围查询（IN） 区间查询（BETWEEN） 统计查询（COUNT） 求和查询（SUM） 选择后生成模板SQL，可修改参数使用 生成SQL 格式化SQL 语法校验 应用模板 自动加注释 模拟执行预览 清空配置 生成结果（可直接复制）： 复制SQL ✅ 注释已自动适配操作类型，可手动修改 显示执行预览结果 SQL模拟执行返回结果： ⚠️ 仅模拟返回结构，非真实数据库查询 {/hide}

图片转base64在线生成器源码
type: item
date: 2025-11-04T21:47:32+08:00
description: 本地处理，无需上传服务器 | 支持JPG、PNG、GIF、WebP等格式 | 一键复制 在线图片转Base64生成器 在线图片转Base64生成器 本地处理，无需上传服务器 | 支持JPG、PNG、GIF、WebP等格式 | 一键复制 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> <polyline points="17 8 12 3 7 8"></polyline> <line x1="12" y1="3" x2="12" y2="15"></line> 上传图片 ? 点击或拖拽图片到此处上传 支持 JPG、PNG、GIF、WebP、BMP 格式 单文件最大 10MB 图片预览 文件名： - 文件大小： - 尺寸： - 格式： - 输出格式 完整 Base64 (带 Data URI 前缀) 纯 Base64 (不含前缀) HTML img 标签 CSS background 样式 <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5"></path> <path d="M2 12l10 5 10-5"></path> 开始转换 重置 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> 转换结果 转换中，请稍候... <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"></path> 复制结果 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> <polyline points="7 10 12 15 17 10"></polyline> <line x1="12" y1="15" x2="12" y2="3"></line> 下载 TXT 上传图片并点击"开始转换"按钮，生成的 Base64 代码将显示在这里 操作成功！

通过AI编写的原生JS弹窗气泡
type: item
date: 2025-09-18T17:37:37+08:00
description: 这款js弹窗气泡代码非常简约，能够胜任日常弹窗业务。 原生JS弹窗气泡 默认弹窗 成功弹窗 错误弹窗 警告弹窗 信息弹窗 不自动关闭 带跳转的弹窗

通过原生js简单实现手风琴效果
type: item
date: 2024-10-06T13:55:00+08:00
description: 今天花费一点时间解决了一下主题中的tab切换存在两种状态的时候只生效一种问题，也修复了一下手风琴每次需要点击两次才能使用的问题。今天就把本站使用的手风琴代码分享给大家，功能有限，只实现了展开和闭合，不支持点击另一个其他展开的全部闭合。下面就是纯纯的干货环节简单的css代码/*手风琴*/ .xm-sfq-body{ background: #ececec; margin: .5rem 0; border-radius: 6px; } .xm-sfq { background-color: #16b576; cursor: pointer; padding: .5rem; width: calc(100% - 1rem); border: none; font-size: 14px; transition: 0.4s; border-radius: 6px; } .xm-sfq-title{ margin-left: 1rem; color: #fff; } .xm-sfq.active,.xm-sfq:hover { background-color:red; } .panelcd { background-color: #bebebe; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; padding: 0 1rem; line-height: 2.5; font-size: 13px; border-radius: 0 0 6px 6px; } .xm-sfq:after { content:'\002B'; font-weight:bold; float:left; margin-left:5px; } .xm-sfq.active:after { content:"\2212"; }html代码 标题 这是内容 标题 这是内容 标题 这是内容 标题 这是内容 标题 这是内容 javascript{hide}function sfq(element) { if (!element) return; var xmSfqElement = element.querySelector('.xm-sfq'); if (xmSfqElement) { // 给 .xm-sfq 添加或删除 "ddd" 类 xmSfqElement.classList.toggle('active'); var panel = element.querySelector('.panelcd'); if (panel.style.maxHeight) { panel.style.maxHeight = ''; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } }{/hide}

台式，笔记本，平板，手机多端一键截图源码
type: item
date: 2024-10-05T13:05:00+08:00
description: 刚刚才想起来，手机那个表单的值填充错地方了，应该在本地测试两个表单提交的js的时候随便写的一个地方，后来搞完就忘改了，如有要使用请自行修改一下即可，只需要修改一个js变量即可。（还有就是手机那个输入框也不能为空，提示的是放屁的）台式，笔记本，平板，手机多端一键截图源码，我看好多人都是收费服务，今天博主自己修改了一下就免费分享给大家了，只需要在博主的网站多多留言就可以免费获取这款有趣的源码。多端截图展示源码截图展示{hide}{wl url="https://www.123684.com/s/kC78Vv-GIG5H?"}提取码:TF4y{/wl title="多端一键截图源码"}{/hide}

通过js暴力实现图片ALT属性显示
type: item
date: 2024-10-03T20:45:00+08:00
description: 今天不是小更新了一下主题模板吗？也是好久没有搞新奇玩意了，突发奇想想给图片添加一个可见描述。问题是博主也不会，一开始也十分的麻爪，现在都是科技时代了，遇事情不要慌。有问题直接上AI智能，让AI帮忙写一个实例代码，在慢慢动手尝试，有问题解决不了的时候再让AI帮忙你解决，如果一次解决不了就把大问题分解成小问题在交给AI处理。效果截图下面就是今天让AI写的一个简单代码，反正够用就行。至于css样式就需要自行解决了。 // 获取所有带有 class "lazyload" 的 img 元素 const images = document.querySelectorAll('.xm-view-body img.lazyload'); // 遍历所有 img 元素 images.forEach((imgElement, index) => { if (!imgElement.classList.contains('biaoqing')) { // 获取 alt 属性的值 const altValue = imgElement.getAttribute('alt') || ''; // 判断 alt 属性的值是否为空 if (altValue.trim() !== '') { // 创建一个 div 并设置其内容 const altDiv = document.createElement('div'); altDiv.textContent = altValue; // 为每个 div 添加一个唯一的 id 和类名 altDiv.id = `altText${index}`; altDiv.className = 'xm-img-alt'; // 将 div 添加到 img 元素后面 imgElement.parentNode.insertBefore(altDiv, imgElement.nextSibling); } } });

通过JS暴力实现生成缩略图通过base64输出
type: item
date: 2024-09-28T13:05:00+08:00
description: 今天也是在网站找了一些用js生成缩略图的文章教程，都是一些千奇百怪的文章，虽然每个文章教程和代码都不一样，结果基本都是那么几种，不是缩放就是裁剪或者重新绘制一个图片。博主也是实验了其中的一种方法，可惜该教程提供的代码不支持直接传图片url地址。虽然博主不懂js代码，不懂怎么办呢？当然是找AI智能帮忙重新修改一遍呗，是不是很简单。 教程参考于：https://blog.csdn.net/sky529063865/article/details/130261981