我科绝伦（Huanhuan Zhou）

分享一个实用的代码对比工具

关键代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码对比工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            color: #f0f8ff;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            margin-bottom: 20px;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #ff7e5f, #feb47b);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #c0d6e4;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .panel {
            background: rgba(25, 40, 65, 0.85);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(100, 150, 255, 0.2);
        }
        
        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(100, 150, 255, 0.3);
        }
        
        .panel-title {
            font-size: 1.4rem;
            color: #4fc3f7;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .code-input {
            width: 100%;
            height: 300px;
            background: rgba(15, 30, 50, 0.7);
            border: 1px solid rgba(100, 150, 255, 0.3);
            border-radius: 8px;
            padding: 15px;
            color: #e0f7fa;
            font-family: 'Consolas', 'Courier New', monospace;
            font-size: 15px;
            line-height: 1.5;
            resize: vertical;
            transition: all 0.3s;
        }
        
        .code-input:focus {
            outline: none;
            border-color: #4fc3f7;
            box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2);
        }
        
        .controls {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin: 20px 0;
        }
        
        .btn {
            padding: 14px 20px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(135deg, #3498db, #1abc9c);
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        .btn-compare {
            background: linear-gradient(135deg, #ff7e5f, #feb47b);
        }
        
        .btn-export {
            background: linear-gradient(135deg, #9c27b0, #673ab7);
        }
        
        .btn-clear {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
        }
        
        .comparison-title {
            text-align: center;
            font-size: 1.5rem;
            margin: 30px 0 20px;
            color: #feb47b;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }
        
        .comparison-container {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .comparison-panel {
            flex: 1;
            background: rgba(25, 40, 65, 0.85);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .comparison-header {
            padding: 15px 20px;
            background: rgba(30, 50, 80, 0.9);
            font-weight: bold;
            color: #4fc3f7;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .comparison-content {
            padding: 15px;
            overflow-x: auto;
            font-family: 'Consolas', 'Courier New', monospace;
            font-size: 15px;
            line-height: 1.5;
            min-height: 350px;
            max-height: 500px;
        }
        
        .line {
            padding: 5px 8px;
            border-radius: 4px;
            margin-bottom: 3px;
            display: flex;
            min-height: 24px;
            transition: background 0.2s;
        }
        
        .line:hover {
            background: rgba(255, 255, 255, 0.05);
        }
        
        .line-number {
            min-width: 35px;
            padding-right: 12px;
            text-align: right;
            color: #95a5a6;
            user-select: none;
        }
        
        .line-content {
            flex: 1;
            overflow-x: auto;
            white-space: pre;
            word-break: break-word;
            padding-left: 8px;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .unchanged { color: #e0f7fa; }
        .inserted { background: rgba(46, 204, 113, 0.25); }
        .deleted { background: rgba(231, 76, 60, 0.25); }
        .changed { background: rgba(241, 196, 15, 0.3); }
        
        .legend {
            display: flex;
            justify-content: center;
            gap: 30px;
            padding: 18px;
            background: rgba(30, 50, 80, 0.8);
            border-radius: 12px;
            margin-top: 25px;
            flex-wrap: wrap;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
        }
        
        .legend-color {
            width: 24px;
            height: 24px;
            border-radius: 4px;
        }
        
        .legend-unchanged { background: transparent; border: 1px solid #3498db; }
        .legend-inserted { background: rgba(46, 204, 113, 0.25); }
        .legend-deleted { background: rgba(231, 76, 60, 0.25); }
        .legend-changed { background: rgba(241, 196, 15, 0.3); }
        
        .stats {
            text-align: center;
            padding: 20px;
            background: rgba(30, 50, 80, 0.8);
            border-radius: 12px;
            margin-top: 25px;
            font-size: 18px;
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }
        
        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 120px;
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            margin-top: 8px;
        }
        
        .added { color: #2ecc71; }
        .removed { color: #e74c3c; }
        .modified { color: #f1c40f; }
        
        .instructions {
            background: rgba(30, 50, 80, 0.8);
            padding: 25px;
            border-radius: 12px;
            margin: 30px 0;
            font-size: 16px;
            line-height: 1.7;
        }
        
        .instructions h3 {
            color: #4fc3f7;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .instructions ul {
            padding-left: 30px;
            margin: 15px 0;
        }
        
        .instructions li {
            margin-bottom: 12px;
        }
        
        footer {
            text-align: center;
            padding: 25px 0;
            color: #a0c4e0;
            font-size: 15px;
            border-top: 1px solid rgba(100, 150, 255, 0.2);
            margin-top: 30px;
        }
        
        @media (max-width: 1100px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            
            .controls {
                grid-template-columns: 1fr;
            }
            
            .comparison-container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-code-compare"></i> 代码对比工具</h1>
            <p class="subtitle">可视化比较两段代码的差异，支持多种编程语言，快速识别代码变化</p>
        </header>
        
        <div class="instructions">
            <h3><i class="fas fa-info-circle"></i> 使用说明</h3>
            <ul>
                <li>在左侧输入原始代码，在右侧输入修改后的代码</li>
                <li>点击"对比代码"按钮查看差异分析结果</li>
                <li>绿色背景表示新增的代码行</li>
                <li>红色背景表示删除的代码行</li>
                <li>黄色背景表示修改的代码行</li>
                <li>使用"导出结果"按钮将对比结果保存为HTML文件</li>
            </ul>
        </div>
        
        <div class="main-content">
            <div class="panel">
                <div class="panel-header">
                    <h2 class="panel-title"><i class="fas fa-file-code"></i> 原始代码</h2>
                </div>
                <textarea id="original-code" class="code-input" placeholder="在此输入原始代码...">function factorial(n) {
    if (n === 0) {
        return 1;
    }
    return n * factorial(n - 1);
}

console.log(factorial(5));</textarea>
            </div>
            
            <div class="panel">
                <div class="panel-header">
                    <h2 class="panel-title"><i class="fas fa-file-code"></i> 修改后代码</h2>
                </div>
                <textarea id="modified-code" class="code-input" placeholder="在此输入修改后的代码...">function factorial(n) {
    // 基本情况：0的阶乘为1
    if (n <= 0) {
        return 1;
    }
    // 递归计算阶乘
    return n * factorial(n - 1);
}

// 测试多个数字
[5, 6, 7].forEach(num => {
    console.log(`阶乘(${num}) = ${factorial(num)}`);
});</textarea>
            </div>
        </div>
        
        <div class="controls">
            <button class="btn btn-compare" onclick="compareCode()">
                <i class="fas fa-exchange-alt"></i> 对比代码
            </button>
            <button class="btn btn-export" onclick="exportResults()">
                <i class="fas fa-download"></i> 导出结果
            </button>
            <button class="btn btn-clear" onclick="clearCode()">
                <i class="fas fa-trash-alt"></i> 清除代码
            </button>
        </div>
        
        <h2 class="comparison-title"><i class="fas fa-chart-bar"></i> 代码差异分析</h2>
        
        <div class="comparison-container">
            <div class="comparison-panel">
                <div class="comparison-header">
                    <span><i class="fas fa-file-alt"></i> 原始代码版本</span>
                    <span>行数: <span id="original-lines">0</span></span>
                </div>
                <div id="original-comparison" class="comparison-content">
                    <div class="line unchanged">
                        <div class="line-number">1</div>
                        <div class="line-content">代码对比结果将显示在这里</div>
                    </div>
                </div>
            </div>
            
            <div class="comparison-panel">
                <div class="comparison-header">
                    <span><i class="fas fa-file-code"></i> 修改后代码版本</span>
                    <span>行数: <span id="modified-lines">0</span></span>
                </div>
                <div id="modified-comparison" class="comparison-content">
                    <div class="line unchanged">
                        <div class="line-number">1</div>
                        <div class="line-content">代码对比结果将显示在这里</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="legend">
            <div class="legend-item">
                <div class="legend-color legend-unchanged"></div>
                <span>未更改的行</span>
            </div>
            <div class="legend-item">
                <div class="legend-color legend-inserted"></div>
                <span>新增的行</span>
            </div>
            <div class="legend-item">
                <div class="legend-color legend-deleted"></div>
                <span>删除的行</span>
            </div>
            <div class="legend-item">
                <div class="legend-color legend-changed"></div>
                <span>修改的行</span>
            </div>
        </div>
        
        <div class="stats">
            <div class="stat-item">
                <span>新增行数</span>
                <div class="stat-value added" id="added-lines">0</div>
            </div>
            <div class="stat-item">
                <span>删除行数</span>
                <div class="stat-value removed" id="removed-lines">0</div>
            </div>
            <div class="stat-item">
                <span>修改行数</span>
                <div class="stat-value modified" id="modified-lines">0</div>
            </div>
            <div class="stat-item">
                <span>总差异</span>
                <div class="stat-value" id="total-changes">0</div>
            </div>
        </div>
        
        <footer>
            <p>代码对比工具 &copy; 2023 | 纯前端实现，无需服务器支持</p>
            <p>使用JavaScript实现代码差异分析算法</p>
        </footer>
    </div>
    
    <script>
        // 代码对比函数
        function compareCode() {
            const originalCode = document.getElementById('original-code').value;
            const modifiedCode = document.getElementById('modified-code').value;
            
            // 分割代码为行数组
            const originalLines = originalCode.split('\n');
            const modifiedLines = modifiedCode.split('\n');
            
            // 更新行数统计
            document.getElementById('original-lines').textContent = originalLines.length;
            document.getElementById('modified-lines').textContent = modifiedLines.length;
            
            // 计算差异
            const diff = calculateDiff(originalLines, modifiedLines);
            
            // 渲染结果
            renderComparison(diff);
        }
        
        // 计算代码差异
        function calculateDiff(original, modified) {
            const diff = [];
            let i = 0, j = 0;
            let added = 0, removed = 0, modifiedCount = 0;
            
            while (i < original.length || j < modified.length) {
                if (i < original.length && j < modified.length && original[i] === modified[j]) {
                    // 未更改的行
                    diff.push({ 
                        type: 'unchanged', 
                        original: original[i], 
                        modified: modified[j],
                        originalLine: i+1,
                        modifiedLine: j+1
                    });
                    i++;
                    j++;
                } else {
                    // 检查是否有删除
                    let found = false;
                    for (let k = i + 1; k <= original.length; k++) {
                        if (j < modified.length && k < original.length && original[k] === modified[j]) {
                            for (let m = i; m < k; m++) {
                                diff.push({ 
                                    type: 'deleted', 
                                    original: original[m], 
                                    modified: null,
                                    originalLine: m+1,
                                    modifiedLine: null
                                });
                                removed++;
                            }
                            i = k;
                            found = true;
                            break;
                        }
                    }
                    
                    // 检查是否有添加
                    if (!found) {
                        for (let k = j + 1; k <= modified.length; k++) {
                            if (i < original.length && k < modified.length && modified[k] === original[i]) {
                                for (let m = j; m < k; m++) {
                                    diff.push({ 
                                        type: 'inserted', 
                                        original: null, 
                                        modified: modified[m],
                                        originalLine: null,
                                        modifiedLine: m+1
                                    });
                                    added++;
                                }
                                j = k;
                                found = true;
                                break;
                            }
                        }
                    }
                    
                    // 检查是否有修改
                    if (!found && i < original.length && j < modified.length) {
                        diff.push({ 
                            type: 'changed', 
                            original: original[i], 
                            modified: modified[j],
                            originalLine: i+1,
                            modifiedLine: j+1
                        });
                        modifiedCount++;
                        i++;
                        j++;
                    }
                    
                    // 处理末尾行
                    if (!found && i >= original.length && j < modified.length) {
                        diff.push({ 
                            type: 'inserted', 
                            original: null, 
                            modified: modified[j],
                            originalLine: null,
                            modifiedLine: j+1
                        });
                        added++;
                        j++;
                    } else if (!found && j >= modified.length && i < original.length) {
                        diff.push({ 
                            type: 'deleted', 
                            original: original[i], 
                            modified: null,
                            originalLine: i+1,
                            modifiedLine: null
                        });
                        removed++;
                        i++;
                    }
                }
            }
            
            // 更新统计信息
            document.getElementById('added-lines').textContent = added;
            document.getElementById('removed-lines').textContent = removed;
            document.getElementById('modified-lines').textContent = modifiedCount;
            document.getElementById('total-changes').textContent = added + removed + modifiedCount;
            
            return diff;
        }
        
        // 渲染对比结果
        function renderComparison(diff) {
            const originalContainer = document.getElementById('original-comparison');
            const modifiedContainer = document.getElementById('modified-comparison');
            
            originalContainer.innerHTML = '';
            modifiedContainer.innerHTML = '';
            
            diff.forEach(item => {
                // 原始代码列
                if (item.original !== null) {
                    const originalLine = document.createElement('div');
                    originalLine.className = `line ${item.type}`;
                    originalLine.innerHTML = `
                        <div class="line-number">${item.originalLine}</div>
                        <div class="line-content">${escapeHtml(item.original)}</div>
                    `;
                    originalContainer.appendChild(originalLine);
                } else {
                    // 空行占位
                    const emptyLine = document.createElement('div');
                    emptyLine.className = 'line';
                    emptyLine.innerHTML = `
                        <div class="line-number"></div>
                        <div class="line-content"></div>
                    `;
                    originalContainer.appendChild(emptyLine);
                }
                
                // 修改后代码列
                if (item.modified !== null) {
                    const modifiedLine = document.createElement('div');
                    modifiedLine.className = `line ${item.type}`;
                    modifiedLine.innerHTML = `
                        <div class="line-number">${item.modifiedLine}</div>
                        <div class="line-content">${escapeHtml(item.modified)}</div>
                    `;
                    modifiedContainer.appendChild(modifiedLine);
                } else {
                    // 空行占位
                    const emptyLine = document.createElement('div');
                    emptyLine.className = 'line';
                    emptyLine.innerHTML = `
                        <div class="line-number"></div>
                        <div class="line-content"></div>
                    `;
                    modifiedContainer.appendChild(emptyLine);
                }
            });
        }
        
        // 导出结果
        function exportResults() {
            const originalCode = document.getElementById('original-code').value;
            const modifiedCode = document.getElementById('modified-code').value;
            
            if (!originalCode && !modifiedCode) {
                alert('请输入要比较的代码');
                return;
            }
            
            // 创建导出内容
            const exportContent = `
            <!DOCTYPE html>
            <html lang="zh-CN">
            <head>
                <meta charset="UTF-8">
                <title>代码对比结果</title>
                <style>
                    body {
                        font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
                        background: #f5f7fa;
                        color: #333;
                        padding: 20px;
                    }
                    .container {
                        max-width: 1400px;
                        margin: 0 auto;
                    }
                    header {
                        text-align: center;
                        padding: 20px 0;
                        margin-bottom: 20px;
                        border-bottom: 1px solid #ddd;
                    }
                    h1 {
                        color: #2c3e50;
                        margin-bottom: 10px;
                    }
                    .comparison-container {
                        display: flex;
                        gap: 20px;
                        margin-bottom: 30px;
                    }
                    .comparison-panel {
                        flex: 1;
                        background: white;
                        border-radius: 8px;
                        overflow: hidden;
                        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                    }
                    .comparison-header {
                        padding: 12px 15px;
                        background: #3498db;
                        color: white;
                        font-weight: bold;
                    }
                    .comparison-content {
                        padding: 15px;
                        font-family: 'Consolas', monospace;
                        font-size: 14px;
                        line-height: 1.5;
                    }
                    .line {
                        padding: 4px 6px;
                        display: flex;
                        margin-bottom: 2px;
                    }
                    .line-number {
                        min-width: 30px;
                        padding-right: 10px;
                        text-align: right;
                        color: #7f8c8d;
                    }
                    .line-content {
                        flex: 1;
                    }
                    .inserted { background: #e8f5e9; }
                    .deleted { background: #ffebee; }
                    .changed { background: #fff8e1; }
                </style>
            </head>
            <body>
                <div class="container">
                    <header>
                        <h1>代码对比结果</h1>
                        <p>生成时间: ${new Date().toLocaleString()}</p>
                    </header>
                    
                    <div class="comparison-container">
                        <div class="comparison-panel">
                            <div class="comparison-header">原始代码</div>
                            <div class="comparison-content">
                                ${document.getElementById('original-comparison').innerHTML}
                            </div>
                        </div>
                        
                        <div class="comparison-panel">
                            <div class="comparison-header">修改后代码</div>
                            <div class="comparison-content">
                                ${document.getElementById('modified-comparison').innerHTML}
                            </div>
                        </div>
                    </div>
                </div>
            </body>
            </html>
            `;
            
            // 创建下载链接
            const blob = new Blob([exportContent], {type: 'text/html'});
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = '代码对比结果.html';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            alert('导出成功！文件已保存为 "代码对比结果.html"');
        }
        
        // 清除代码
        function clearCode() {
            document.getElementById('original-code').value = '';
            document.getElementById('modified-code').value = '';
            document.getElementById('original-comparison').innerHTML = '1
请在上方输入代码并点击对比按钮
';
            document.getElementById('modified-comparison').innerHTML = '1
请在上方输入代码并点击对比按钮
';
            document.getElementById('original-lines').textContent = '0';
            document.getElementById('modified-lines').textContent = '0';
            document.getElementById('added-lines').textContent = '0';
            document.getElementById('removed-lines').textContent = '0';
            document.getElementById('modified-lines').textContent = '0';
            document.getElementById('total-changes').textContent = '0';
        }
        
        // HTML转义函数
        function escapeHtml(unsafe) {
            if (!unsafe) return '';
            return unsafe
                .replace(/&/g, "&")
                .replace(/</g, "<")
                .replace(/>/g, ">")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }
        
        // 页面加载时自动对比示例代码
        window.onload = function() {
            setTimeout(compareCode, 500);
        };
    </script>
</body>
</html>

源码链接：

通过网盘分享的文件：代码对比工具
链接: https://pan.baidu.com/s/1ENpyCEf2tZDnSyB61YDVCA 
提取码: 9bcb

移动端城市区县二级联动选择功能实现包 good2know
本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
js操作样式郝加升
DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge
用代码生成艺术字：设计个性化海报的秘密
本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
前端面试每日 3+1 —— 第39天浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录二倍速播放前端 vue.js
1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSS css 前端 html
总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
12. 什么是事件委托 yqcoder 前端面试-CSS css 面试
总结事件委托（EventDelegation）是JavaScript中一种重要的事件处理机制，它利用了事件冒泡的特性，将事件的处理程序绑定到父元素或祖先元素上，而不是直接绑定到具体的子元素上。什么是事件委托？事件冒泡：在DOM中，事件通常会从触发元素开始，然后逐级向上冒泡到其父元素、祖先元素，直到window对象。核心思想：事件委托的核心思想是利用事件冒泡机制，在父元素上监听事件，而不是在每个子元
关于前端的性能优化
性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
时间组件库Day.js那些事前端小白花 javascript 开发语言 ecmascript
一、简介1.什么是Day.jsDay.js是一个轻量级，易于使用的JavaScript日期库，提供了强大的日期和时间处理功能，与Moment.js的API设计相似，但具有更高的性能和更小的体积。Day.js官网https://day.js.org/docs/zh-CN/installation/installation2.优势a.特点轻量级：Dayjs的压缩后大小只有2KB左右，远小于Moment
JavaScript正则表达式去除括号但保留内容与去除括号与内容 Selicens javascript 正则表达式
项目上碰到一个需求，是取多个递增文件的文件名，类似于test(1).txt、test(2).txt，但是不需要括号，只要test1、test2这种格式，最开始想到的办法就是js里的replace替换，先上一个比较笨但是也能实现效果的例子letname="test(1).txt"letdata=name.split('.')[0].replace('(','').replace(')','')con
Grid布局参考资料 kiterumer
Grid布局张鑫旭-写给自己看的display:grid布局教程阮一峰-CSSGrid网格布局教程在Grid布局中，float，display:inline-block，display:table-cell，vertical-align以及column-*这些属性和声明对grid子项是没有任何作用的。这个可以说是Grid布局中的常识，面试经常会问的，一定要记得。Grid布局则适用于更大规模的布局（
网络安全第14集不灭锦鲤 web安全安全
前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后
25年不倒的“犀牛书“：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？阿蒙Armon javascript 开发语言 ecmascript
25年不倒的"犀牛书"：为什么《JavaScript权威指南第7版》仍是程序员的案头圣经？当一本技术书能连续畅销25年，历经7次迭代仍稳坐领域第一梯队，它必然藏着超越时代的硬实力。《JavaScript权威指南（原书第7版）》就是这样一部传奇——豆瓣9.4分的封神之作，程序员口中的"犀牛书"，从网景时代到ES2020，它始终是JavaScript开发者的终极参考书。如果你还在为原型链、闭包、异步编
解决 Webpack 报错 “No module factory available for dependency type: CssDependency“ 的方法 cmmav33990 webpack rust 前端
这个错误表明Webpack在处理CSS依赖时找不到合适的模块工厂，通常发生在配置不完整或依赖冲突的情况下。以下是详细的解决方案：核心解决方案方案1：安装并配置正确的CSS处理器（最推荐）bashnpminstall--save-devcss-loaderstyle-loader#或使用mini-css-extract-plugin替代style-loadernpminstall--save-dev
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Pokedex（宝可梦图鉴）
我们继续50个小项目挑战！——Pokedex组件仓库地址：https://github.com/SunACong/50-vue-projects项目预览地址：https://50-vue-projects.vercel.app/使用Vue3结合PokeAPI来创建一个炫酷的宝可梦图鉴应用。通过这个项目，你将能够浏览前150只宝可梦的信息，包括它们的名字、类型、身高、体重以及能力等。而且，每只宝可梦
CSS基础（3） Zzz_睡不醒 css 前端 html
CSS背景操作1.多重背景(MultipleBackgrounds)div{background-image:url(image1.png),url(image2.png);background-position:rightbottom,lefttop;background-repeat:no-repeat,repeat;background-size:auto,cover;}background
什么是JSON，如何与Java对象转化 doublez234 java json spring spring boot
JSON概念JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它易于人阅读和编写，同时也易于机器解析和生成。JSON基于JavaScript（ECMAScript（欧洲计算机协会制定的js规范））编程语言的一个子集，但它是一种独立于语言的数据格式，被广泛应用于各种编程语言和平台之间的数据交换。JSON的主要特点：轻量级：JSON格式非常简洁，只包含必要的数据信
《博客园精华集》web标准分册第2论筛选结果文章列表
《博客园精华集》web标准部分筛选结果（共55篇）一个喜欢网页设计的程序员作者：Awen根本不存在DIV+CSS布局这回事作者：CatChen欲练CSS，必先宫IE作者：CatChen你有强迫症吗？作者：CatChenSPAN元素和DIV元素的区别作者：ChrisLiudiv的认识作者：ChrisLiu实时检验您的页面是否符合XHTML标准——使用ValidatorModule作者：Dflying
APP开发入门：了解主流的编程语言 agi大模型 Python 职业与职场程序员开发语言数据分析编程语言
前言在过去的几年里，有许多程序员开始学习和使用编程语言。这其中包括C、C++、Java和Python。尽管有许多语言可供选择，但大多数程序员都会选择最容易学习的编程语言。如今，有很多编程语言供选择。程序员们在学习这些语言时可以自由地选择他们喜欢的方式，因为他们的目标是构建任何软件，而不仅仅是创建一个应用程序。你可以在Linux上学习C/C++、Java、Python、C#或JavaScript，你
GAMES202——作业1 实时阴影(ShadowMap，PCF，PCSS)
目录任务ShadowMapPCFPCSS实现ShadowMapuseShadowMapPCFfindBlockerPCSS结果任务ShadowMap1.在ShadowMaterial.js中需要向Shader传递正确的uLightMVP矩阵，该矩阵参与了第一步从光源处渲染场景从而构造ShadowMap的过程。你需要完成DirectionalLight中的CalcLightMVP(translate
Shadow Map ———— PCSS（percentage-closer Soft Shadow） kevin_dust
ShadowMap————PCSS（percentage-closerSoftShadow）1、PCSS解决了什么问题传统的PCF每一次采样过滤耗费很大（每次都要遍历附近的几个点，虽然用了泊松分布，但还是不可避免），PCSS算法基本解决了该问题（通过动态计算采样范围，使用FindBlocker剔除非阴影点）传统的PCF半影不够逼真…PCSS算法通过计算准确的半影范围解决了4、PCSS的有关你资料：
探秘CommonJS：Node.js模块化核心解析
CommonJS是JavaScript的模块化规范，主要应用于服务器端环境（尤其是Node.js），其核心目标是解决代码组织、依赖管理和作用域隔离问题。以下是其核心要点：一、核心特性同步加载模块通过require()同步加载并执行，后续代码需等待模块加载完成后执行，适用于I/O快速的服务器环境（如本地文件读取）。作用域隔离每个文件视为独立模块，模块内定义的变量、函数默认私有（不污染全局作用域），仅
壹脉销客AI电子名片源码核心架构
为什么选择源码部署AI电子名片？在数字化转型浪潮中，越来越多的企业意识到拥有自主可控的电子名片系统的重要性。源码部署相比SaaS服务具有三大核心优势：数据完全自主-客户信息存储在企业自有服务器深度定制自由-可根据业务需求二次开发长期成本优化-一次部署永久使用壹脉销客AI电子名片源码核心架构壹脉销客提供的企业级电子名片解决方案采用前后端分离架构：前端技术栈（小程序端）javascript//小程序a
vue 进入一个页面，然后离开这个页面他就重新加载 Java&Develop vue vue
vue进入一个页面，然后离开这个页面他就重新加载这个代码导致的注释即可window.location.reload();window.location.reload()是JavaScript中的一个方法，用于强制刷新当前页面（重新加载页面内容）。其作用类似于用户手动点击浏览器的刷新按钮，但可以通过代码精确触发。核心作用：刷新页面重新加载当前显示的文档（即重新请求当前URL的资源）。可选参数控制缓存
PyQt5窗口背景设置全攻略：三种方法实现精美界面
QSS样式表法（最常用）特点：声明式语法、支持CSS特性、子控件自动继承样式1.纯色背景设置创建主窗口并设置黄色背景win=QMainWindow()win.setObjectName("MainWindow")win.setStyleSheet("#MainWindow{background-color:yellow}")2.背景图片设置（自适应尺寸）使用border-image实现背景图平铺w
[python][flask]flask静态资源
在Flask中，静态资源（如图片、CSS文件、JavaScript文件等）通常存储在项目的static文件夹中。Flask会自动为静态资源提供服务，使得你可以通过URL访问这些文件。以下是关于Flask中静态资源的使用方法和一些高级配置。1.默认静态文件夹Flask默认会将项目根目录下的static文件夹作为静态资源目录。例如，如果你的项目结构如下：my_flask_app/│├──app.py├
前端面试题大大。前端 vue.js javascript
HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section)，多媒体支持video,audio，Canvas绘图div上下居中对齐的几种方式第一种：flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种
JavaScript对象与Math对象完全指南 hui函数 Javascript javascript 前端开发语言
JavaScript对象与Math对象完全指南对象基础概念与操作对象是什么？数据集合：包含相关数据和功能的容器结构组成：属性：描述对象特征的变量（名词性）方法：对象可执行的操作（动词性，本质是函数）对象创建与访问//创建对象letperson={ //属性 name:"张三", age:28, profession:"软件工程师", //方法 introduce(){ return`大家好，我
深入理解JavaScript作用域与编译过程君子心理作用域编译 JavaScript 变量提升闭包
背景简介在编程领域，作用域和编译过程是理解语言机制的关键概念。JavaScript作为一种广泛使用的语言，其作用域规则和编译机制尤其值得我们深入探讨。本文将基于《你不懂JS》系列书籍中的相关内容，解析JavaScript的作用域系统、函数闭包以及编译过程，帮助读者获得更深层次的理解。作用域是什么？在JavaScript中，作用域定义了变量和函数的可访问范围。编写程序时，我们会频繁使用变量来存储和操
java线程的无限循环和退出 3213213333332132 java
最近想写一个游戏，然后碰到有关线程的问题，网上查了好多资料都没满足。突然想起了前段时间看的有关线程的视频，于是信手拈来写了一个线程的代码片段。希望帮助刚学java线程的童鞋 package thread; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date
tomcat 容器 BlueSkator tomcat Web servlet
Tomcat的组成部分 1、server A Server element represents the entire Catalina servlet container. (Singleton) 2、service service包括多个connector以及一个engine，其职责为处理由connector获得的客户请求。 3、connector 一个connector
php递归,静态变量,匿名函数使用 dcj3sjt126com PHP 递归函数匿名函数静态变量引用传参
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Current To-Do List</title> </head> <body>
属性颜色字体变化周华华 JavaScript
function changSize(className){ var diva=byId("fot") diva.className=className; } </script> <style type="text/css"> .max{ background: #900; color:#039;
将properties内容放置到map中 g21121 properties
代码比较简单： private static Map<Object, Object> map; private static Properties p; static { //读取properties文件 InputStream is = XXX.class.getClassLoader().getResourceAsStream("xxx.properti
[简单]拼接字符串 53873039oycg 字符串
工作中遇到需要从Map里面取值拼接字符串的情况，自己写了个，不是很好，欢迎提出更优雅的写法，代码如下： import java.util.HashMap; import java.uti
Struts2学习云端月影
最近开始关注struts2的新特性，从这个版本开始，Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置。配置文件精简了，的确是简便了开发过程，但是，我们熟悉的配置突然disappear了，真是一下很不适应。跟着潮流走吧，看看该怎样来搞定convention-plugin。使用Convention插件，你需要将其JAR文件放
Java新手入门的30个基本概念二 aijuans java 新手 java 入门
基本概念:　　1.OOP中唯一关系的是对象的接口是什么,就像计算机的销售商她不管电源内部结构是怎样的,他只关系能否给你提供电就行了,也就是只要知道can or not而不是how and why.所有的程序是由一定的属性和行为对象组成的,不同的对象的访问通过函数调用来完成,对象间所有的交流都是通过方法调用,通过对封装对象数据,很大限度上提高复用率。　　2.OOP中最重要的思想是类,类是模板是蓝图,
jedis 简单使用 antlove java redis cache command jedis
jedis.RedisOperationCollection.java package jedis; import org.apache.log4j.Logger; import redis.clients.jedis.Jedis; import java.util.List; import java.util.Map; import java.util.Set; pub
PL/SQL的函数和包体的基础百合不是茶 PL/SQL编程函数包体显示包的具体数据包
由于明天举要上课,所以刚刚将代码敲了一遍PL/SQL的函数和包体的实现(单例模式过几天好好的总结下再发出来);以便明天能更好的学习PL/SQL的循环,今天太累了,所以早点睡觉,明天继续PL/SQL总有一天我会将你永远的记载在心里,,, 函数; 函数:PL/SQL中的函数相当于java中的方法;函数有返回值定义函数的 --输入姓名找到该姓名的年薪 create or re
Mockito(二)--实例篇 bijian1013 持续集成 mockito 单元测试
学习了基本知识后，就可以实战了，Mockito的实际使用还是比较麻烦的。因为在实际使用中，最常遇到的就是需要模拟第三方类库的行为。比如现在有一个类FTPFileTransfer，实现了向FTP传输文件的功能。这个类中使用了a
精通Oracle10编程SQL(7)编写控制结构 bijian1013 oracle 数据库 plsql
/* *编写控制结构 */ --条件分支语句 --简单条件判断 DECLARE v_sal NUMBER(6,2); BEGIN select sal into v_sal from emp where lower(ename)=lower('&name'); if v_sal<2000 then update emp set
【Log4j二】Log4j属性文件配置详解 bit1129 log4j
如下是一个log4j.properties的配置 log4j.rootCategory=INFO, stdout , R log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.layout=org.apache.log4j.PatternLayout log4j.appe
java集合排序笔记白糖_ java
public class CollectionDemo implements Serializable,Comparable<CollectionDemo>{ private static final long serialVersionUID = -2958090810811192128L; private int id; private String nam
java导致linux负载过高的定位方法 ronin47
定位java进程ID 可以使用top或ps -ef |grep java ![图片描述][1] 根据进程ID找到最消耗资源的java pid 比如第一步找到的进程ID为5431 执行 top -p 5431 -H ![图片描述][2] 打印java栈信息 $ jstack -l 5431 > 5431.log 在栈信息中定位具体问题将消耗资源的Java PID转
给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数 bylijinnan 函数
import java.util.ArrayList; import java.util.List; import java.util.Random; public class RandNFromRand5 { /** 题目：给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数。解法1： f(k) = (x0-1)*5^0+(x1-
PL/SQL Developer保存布局 Kai_Ge
近日由于项目需要，数据库从DB2迁移到ORCAL，因此数据库连接客户端选择了PL/SQL Developer。由于软件运用不熟悉，造成了很多麻烦，最主要的就是进入后，左边列表有很多选项，自己删除了一些选项卡，布局很满意了，下次进入后又恢复了以前的布局，很是苦恼。在众多PL/SQL Developer使用技巧中找到如下这段： &n
[未来战士计划]超能查派[剧透,慎入] comsci 计划
非常好看,超能查派,这部电影......为我们这些热爱人工智能的工程技术人员提供一些参考意见和思想........ 虽然电影里面的人物形象不是非常的可爱....但是非常的贴近现实生活.... &nbs
Google Map API V2 dai_lm google map
以后如果要开发包含google map的程序就更麻烦咯 http://www.cnblogs.com/mengdd/archive/2013/01/01/2841390.html 找到篇不错的文章，大家可以参考一下 http://blog.sina.com.cn/s/blog_c2839d410101jahv.html 1. 创建Android工程由于v2的key需要G
java数据计算层的几种解决方法2 datamachine java sql 集算器
2、SQL SQL/SP/JDBC在这里属于一类，这是老牌的数据计算层，性能和灵活性是它的优势。但随着新情况的不断出现，单纯用SQL已经难以满足需求，比如： JAVA开发规模的扩大，数据量的剧增，复杂计算问题的涌现。虽然SQL得高分的指标不多，但都是权重最高的。成熟度：5星。最成熟的。
Linux下Telnet的安装与运行 dcj3sjt126com linux telnet
Linux下Telnet的安装与运行 linux默认是使用SSH服务的而不安装telnet服务如果要使用telnet 就必须先安装相应的软件包即使安装了软件包默认的设置telnet 服务也是不运行的需要手工进行设置如果是redhat9，则在第三张光盘中找到 telnet-server-0.17-25.i386.rpm
PHP中钩子函数的实现与认识 dcj3sjt126com PHP
假如有这么一段程序： function fun(){ fun1(); fun2(); } 首先程序执行完fun1()之后执行fun2()然后fun()结束。但是，假如我们想对函数做一些变化。比如说，fun是一个解析函数，我们希望后期可以提供丰富的解析函数，而究竟用哪个函数解析，我们希望在配置文件中配置。这个时候就可以发挥钩子的力量了。我们可以在fu
EOS中的WorkSpace密码修改蕃薯耀修改WorkSpace密码
EOS中BPS的WorkSpace密码修改 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 201
SpringMVC4零配置--SpringSecurity相关配置【SpringSecurityConfig】 hanqunfeng SpringSecurity
SpringSecurity的配置相对来说有些复杂，如果是完整的bean配置，则需要配置大量的bean，所以xml配置时使用了命名空间来简化配置，同样，spring为我们提供了一个抽象类WebSecurityConfigurerAdapter和一个注解@EnableWebMvcSecurity，达到同样减少bean配置的目的，如下： applicationContex
ie 9 kendo ui中ajax跨域的问题 jackyrong AJAX跨域
这两天遇到个问题，kendo ui的datagrid，根据json去读取数据，然后前端通过kendo ui的datagrid去渲染，但很奇怪的是，在ie 10,ie 11,chrome,firefox等浏览器中，同样的程序，浏览起来是没问题的，但把应用放到公网上的一台服务器，却发现如下情况： 1） ie 9下，不能出现任何数据，但用IE 9浏览器浏览本机的应用，却没任何问题
不要让别人笑你不能成为程序员 lampcy 编程程序员
在经历六个月的编程集训之后，我刚刚完成了我的第一次一对一的编码评估。但是事情并没有如我所想的那般顺利。说实话，我感觉我的脑细胞像被轰炸过一样。手慢慢地离开键盘，心里很压抑。不禁默默祈祷：一切都会进展顺利的，对吧？至少有些地方我的回答应该是没有遗漏的，是不是？难道我选择编程真的是一个巨大的错误吗——我真的永远也成不了程序员吗？我需要一点点安慰。在自我怀疑，不安全感和脆弱等等像龙卷风一
马皇后的贤德 nannan408
马皇后不怕朱元璋的坏脾气，并敢理直气壮地吹耳边风。众所周知，朱元璋不喜欢女人干政，他认为“后妃虽母仪天下，然不可使干政事”，因为“宠之太过，则骄恣犯分，上下失序”，因此还特地命人纂述《女诫》，以示警诫。但马皇后是个例外。　　有一次，马皇后问朱元璋道：“如今天下老百姓安居乐业了吗？”朱元璋不高兴地回答：“这不是你应该问的。”马皇后振振有词地回敬道：“陛下是天下之父，
选择某个属性值最大的那条记录（不仅仅包含指定属性，而是想要什么属性都可以） Rainbow702 sql group by 最大值 max 最大的那条记录
好久好久不写SQL了，技能退化严重啊！！！直入主题：比如我有一张表，file_info，它有两个属性（但实际不只，我这里只是作说明用）： file_code, file_version 同一个code可能对应多个version 现在，我想针对每一个code，取得它相关的记录中，version 值最大的那条记录， SQL如下： select *
VBScript脚本语言 tntxia VBScript
VBScript 是基于VB的脚本语言。主要用于Asp和Excel的编程。 VB家族语言简介 Visual Basic 6.0 源于BASIC语言。由微软公司开发的包含协助开发环境的事
java中枚举类型的使用 xiao1zhao2 java enum 枚举 1.5新特性
枚举类型是j2se在1.5引入的新的类型,通过关键字enum来定义,常用来存储一些常量. 1.定义一个简单的枚举类型 public enum Sex { MAN, WOMAN } 枚举类型本质是类,编译此段代码会生成.class文件.通过Sex.MAN来访问Sex中的成员,其返回值是Sex类型. 2.常用方法静态的values()方

分享一个实用的代码对比工具

关键代码如下：

源码链接：

你可能感兴趣的:(css,css3,javascript)