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

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

本文分享了5个实用的JavaScript前端开发案例，包括：

1. 颜色选择器：实现RGB/HEX双向转换与实时预览
2. 二维码生成器：协助文本转换与图片下载功能
3. 五星级评分组件：实现半星评分与本地存储持久化
4. 手风琴折叠面板：支持单开/多开两种交互模式
5. 滚动进度条：实时表现页面滚动百分比

案例 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值更新RGB
        function 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;