JavaScript 网页交互进阶：5 个经典案例实现（二）—— 覆盖 UI 组件开发与工具函数封装

JavaScript 网页交互进阶：5 个经典案例实现（二）—— 覆盖 UI 组件开发与工具函数封装 - 教程

news/2025/11/30 21:45:14/文章来源:https://www.cnblogs.com/yangykaifa/p/19290497

在前端开发中，高频复用的交互组件和软件函数是提升开发效率的关键。本文整理了 10 个经典 JavaScript 案例，涵盖 UI 组件、数据管理、性能优化等场景，每个案例均包含核心功能、技术点说明及可直接运行的完整代码，适合新手学习参考，也可直接集成到项目中应用。

本文分享了5个实用的JavaScript前端开发案例，包括：
颜色选择器：实现RGB/HEX双向转换与实时预览
二维码生成器：协助文本转换与图片下载功能
五星级评分组件：实现半星评分与本地存储持久化
手风琴折叠面板：支持单开/多开两种交互模式
滚动进度条：实时表现页面滚动百分比

案例 1：颜色选择器（RGB/HEX 转换 + 预览）

核心功能

支持通过滑块调整 RGB 三色值（0-255 范围）
实时展示对应的 HEX 颜色值并支持手动输入
实时预览所选颜色效果
RGB 与 HEX 格式双向自动转换

技术点

RGB 与 HEX 颜色格式数学转换算法
表单输入事件监听与数据同步
实时值边界处理与格式验证
DOM 实时更新与视图渲染优化

效果图

实现代码

高级颜色选择器
红色 (R)
绿色 (G)
蓝色 (B)
HEX 颜色值支持直接输入HEX值（如#FF0088）进行颜色选择
<script>// 获取DOM元素const colorPreview = document.getElementById('colorPreview');const redSlider = document.getElementById('redSlider');const greenSlider = document.getElementById('greenSlider');const blueSlider = document.getElementById('blueSlider');const redValue = document.getElementById('redValue');const greenValue = document.getElementById('greenValue');const blueValue = document.getElementById('blueValue');const hexInput = document.getElementById('hexInput');// RGB转HEX函数function rgbToHex(r, g, b) {// 将十进制转为十六进制并补零const toHex = (num) => {const hex = num.toString(16);return hex.length === 1 ? '0' + hex : hex;};const hex = `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();return hex;}// HEX转RGB函数function hexToRgb(hex) {// 移除#号hex = hex.replace(/^#/, '');// 处理3位HEX值（如#FFF）if (hex.length === 3) {hex = hex.split('').map(char => char + char).join('');}// 解析RGB值const r = parseInt(hex.substring(0, 2), 16);const g = parseInt(hex.substring(2, 4), 16);const b = parseInt(hex.substring(4, 6), 16);// 验证有效性if (isNaN(r) || isNaN(g) || isNaN(b)) {return null;}return { r, g, b };}// 更新颜色预览function updateColorPreview() {const r = parseInt(redSlider.value);const g = parseInt(greenSlider.value);const b = parseInt(blueSlider.value);// 设置预览颜色colorPreview.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;// 更新HEX输入框const hex = rgbToHex(r, g, b);hexInput.value = hex;}// 同步RGB输入值function syncRGBValues() {redValue.value = redSlider.value;greenValue.value = greenSlider.value;blueValue.value = blueSlider.value;updateColorPreview();}// 从HEX值更新RGBfunction updateFromHex() {const hex = hexInput.value.trim();const rgb = hexToRgb(hex);if (rgb) {redSlider.value = rgb.r;greenSlider.value = rgb.g;blueSlider.value = rgb.b;syncRGBValues();}}// 事件监听redSlider.addEventListener('input', syncRGBValues);greenSlider.addEventListener('input', syncRGBValues);blueSlider.addEventListener('input', syncRGBValues);redValue.addEventListener('change', () => {// 确保值在0-255范围内const value = Math.min(255, Math.max(0, parseInt(redValue.value) || 0));redValue.value = value;