1.4.1 时间复杂度可视化实验�?/title> <link rel="stylesheet" href="../shared/css/common.css"> <style> .config-bar { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } .config-bar label { font-size: 0.85rem; color: var(--muted); } .config-bar select { padding: 6px 10px; font-size: 0.85rem; } .curve-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 0.82rem; } .curve-legend span { display: inline-flex; align-items: center; gap: 6px; } .curve-dot { width: 20px; height: 3px; border-radius: 2px; display: inline-block; } #complexityCanvas { width: 100%; height: 400px; background: #fff; border-radius: var(--radius-sm); } .range-display { font-size: 0.85rem; color: var(--accent); font-weight: 600; min-width: 60px; display: inline-block; text-align: center; } @media (max-width: 768px) { #complexityCanvas { height: 300px; } } </style> </head> <body> <nav class="top-nav"> <div class="container top-nav-inner"> <a href="../index.html" class="site-title">数据结构课程</a> <div class="nav-links"> <a href="../index.html">首页</a> <a href="h5-1-1.html" class="active">�?�?/a> <a href="#">�?�?/a> <a href="#">�?�?/a> <a href="#">�?�?/a> <a href="#">�?�?/a> <a href="#">�?�?/a> <a href="#">�?�?/a> <a href="#">�?�?/a> </div> </div> </nav> <div class="chapter-nav"> <div class="container chapter-nav-inner"> <a href="h5-1-1.html">1.1.1 知识地图</a> <a href="h5-1-2a.html">1.2.1 逻辑vs存储</a> <a href="h5-1-2b.html">1.2.2 ADT拆解</a> <a href="h5-1-4a.html" class="active">1.4.1 复杂度可视化</a> <a href="h5-1-4b.html">1.4.2 复杂度练�?/a> <a href="h5-1-4c.html">1.4.3 渐近符号</a> </div> </div> <header class="page-header"> <div class="container"> <h1>1.4.1 时间复杂度可视化实验�?/h1> <p class="subtitle">选择复杂度类型，观察曲线增长趋势，支持双曲线对比</p> </div> </header> <main class="page-content"> <div class="container"> <div class="control-panel"> <div class="ctrl-group"> <button class="btn btn-primary" id="btnPlay">�?播放</button> <button class="btn btn-secondary" id="btnPause">�?暂停</button> <button class="btn btn-secondary" id="btnStep">�?单步</button> <button class="btn btn-secondary" id="btnBack">�?后退</button> <button class="btn btn-danger" id="btnReset">�?重置</button> </div> <div class="ctrl-group"> <label>速度: <input type="range" id="speedSlider" min="100" max="1000" value="500"></label> </div> </div> <div class="status-bar" id="statusBar">选择复杂度类型和n的范围，点击播放观看曲线绘制动画</div> <div class="config-bar"> <label>曲线A: <select id="curveA"> <option value="O1" selected>O(1)</option> <option value="Ologn">O(log n)</option> <option value="On">O(n)</option> <option value="Onlogn">O(n log n)</option> <option value="On2">O(n²)</option> <option value="O2n">O(2�?</option> </select></label> <label>曲线B: <select id="curveB"> <option value="none" selected>�?/option> <option value="O1">O(1)</option> <option value="Ologn">O(log n)</option> <option value="On">O(n)</option> <option value="Onlogn">O(n log n)</option> <option value="On2">O(n²)</option> <option value="O2n">O(2�?</option> </select></label> <label>n范围: 1 ~ <span class="range-display" id="nRangeVal">100</span> <input type="range" id="nRange" min="10" max="1000" value="100" step="10"></label> </div> <div class="curve-legend" id="legendBar"> <span><i class="curve-dot" style="background:#4361ee"></i> O(1)</span> </div> <div class="viz-container"> <canvas id="complexityCanvas"></canvas> </div> </div> </main> <script src="../shared/js/common.js"></script> <script> (function() { 'use strict'; const canvas = document.getElementById('complexityCanvas'); const ctx = canvas.getContext('2d'); const statusBar = document.getElementById('statusBar'); const nRangeVal = document.getElementById('nRangeVal'); const legendBar = document.getElementById('legendBar'); const colors = { O1: '#4361ee', Ologn: '#2a9d8f', On: '#e9c46a', Onlogn: '#f4a261', On2: '#e63946', O2n: '#9b5de5' }; const labels = { O1: 'O(1)', Ologn: 'O(log n)', On: 'O(n)', Onlogn: 'O(n log n)', On2: 'O(n²)', O2n: 'O(2�?' }; function f(type, n) { switch(type) { case 'O1': return 1; case 'Ologn': return Math.log2(n + 1); case 'On': return n; case 'Onlogn': return n * Math.log2(n + 1); case 'On2': return n * n; case 'O2n': return Math.pow(2, Math.min(n, 20)); default: return n; } } let width, height; let nMax = 100; let curveA = 'O1', curveB = 'none'; let animProgress = 0; let isPlaying = false; let timer = null; let speed = 500; function resize() { const rect = canvas.parentElement.getBoundingClientRect(); width = rect.width - 40; height = window.innerWidth <= 768 ? 300 : 400; const dpr = window.devicePixelRatio || 1; canvas.width = width * dpr; canvas.height = height * dpr; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); draw(); } function draw() { ctx.clearRect(0, 0, width, height); const pad = { top: 30, right: 30, bottom: 40, left: 50 }; const chartW = width - pad.left - pad.right; const chartH = height - pad.top - pad.bottom; // 坐标�? ctx.strokeStyle = '#333'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(pad.left, pad.top); ctx.lineTo(pad.left, height - pad.bottom); ctx.lineTo(width - pad.right, height - pad.bottom); ctx.stroke(); // 刻度 ctx.fillStyle = '#6c757d'; ctx.font = '12px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'; for (let i = 0; i <= 5; i++) { const x = pad.left + (chartW / 5) * i; const nVal = Math.round((nMax / 5) * i); ctx.fillText(String(nVal), x, height - pad.bottom + 6); ctx.beginPath(); ctx.moveTo(x, height - pad.bottom); ctx.lineTo(x, height - pad.bottom + 4); ctx.strokeStyle = '#999'; ctx.lineWidth = 1; ctx.stroke(); } // Y轴刻�? ctx.textAlign = 'right'; ctx.textBaseline = 'middle'; const types = [curveA, curveB].filter(t => t !== 'none'); let maxY = 0; types.forEach(t => { for (let i = 1; i <= nMax; i++) { maxY = Math.max(maxY, f(t, i)); } }); if (maxY === 0) maxY = 10; for (let i = 0; i <= 4; i++) { const y = pad.top + chartH - (chartH / 4) * i; const val = (maxY / 4) * i; let txt = val < 10 ? val.toFixed(1) : val < 1000 ? Math.round(val) : (val / 1000).toFixed(1) + 'k'; ctx.fillText(txt, pad.left - 8, y); ctx.beginPath(); ctx.moveTo(pad.left - 4, y); ctx.lineTo(pad.left, y); ctx.strokeStyle = '#999'; ctx.stroke(); } // 绘制曲线 types.forEach(type => { const color = colors[type]; ctx.beginPath(); ctx.strokeStyle = color; ctx.lineWidth = 2.5; const steps = Math.floor(nMax * animProgress); for (let i = 1; i <= steps; i++) { const x = pad.left + (i / nMax) * chartW; const yVal = f(type, i); const y = pad.top + chartH - (yVal / maxY) * chartH; if (i === 1) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); }); } function updateLegend() { const types = [curveA, curveB].filter(t => t !== 'none'); legendBar.innerHTML = types.map(t => `<span><i class="curve-dot" style="background:${colors[t]}"></i> ${labels[t]}</span>` ).join(''); } function playAnim() { if (isPlaying) return; isPlaying = true; animProgress = 0; function next() { if (!isPlaying) return; animProgress += 0.02; if (animProgress >= 1) { animProgress = 1; isPlaying = false; draw(); statusBar.textContent = '曲线绘制完成'; return; } draw(); statusBar.textContent = `绘制进度: ${Math.round(animProgress * 100)}%`; timer = setTimeout(next, speed / 20); } next(); } function pauseAnim() { isPlaying = false; clearTimeout(timer); statusBar.textContent = '动画已暂�?; } function stepFwd() { animProgress = Math.min(1, animProgress + 0.1); draw(); statusBar.textContent = `进度: ${Math.round(animProgress * 100)}%`; } function stepBack() { animProgress = Math.max(0, animProgress - 0.1); draw(); statusBar.textContent = `进度: ${Math.round(animProgress * 100)}%`; } function resetAnim() { isPlaying = false; clearTimeout(timer); animProgress = 0; draw(); statusBar.textContent = '已重�?; } document.getElementById('curveA').addEventListener('change', (e) => { curveA = e.target.value; updateLegend(); resetAnim(); }); document.getElementById('curveB').addEventListener('change', (e) => { curveB = e.target.value; updateLegend(); resetAnim(); }); document.getElementById('nRange').addEventListener('input', (e) => { nMax = parseInt(e.target.value); nRangeVal.textContent = nMax; resetAnim(); }); document.getElementById('btnPlay').addEventListener('click', playAnim); document.getElementById('btnPause').addEventListener('click', pauseAnim); document.getElementById('btnStep').addEventListener('click', stepFwd); document.getElementById('btnBack').addEventListener('click', stepBack); document.getElementById('btnReset').addEventListener('click', resetAnim); document.getElementById('speedSlider').addEventListener('input', (e) => { speed = 1100 - parseInt(e.target.value); }); window.addEventListener('resize', resize); resize(); updateLegend(); animProgress = 1; draw(); statusBar.textContent = '已加载。选择复杂度类型和n范围，点击播放观看动画�?; })(); </script> </body> </html>