1.2.2 ADT概念拆解�?/title> <link rel="stylesheet" href="../shared/css/common.css"> <style> .adt-selector { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; } .adt-selector button { padding: 8px 20px; border: 1px solid var(--rule); background: #fff; border-radius: 20px; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; } .adt-selector button.active { background: var(--accent); color: #fff; border-color: var(--accent); } .cards-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; } .flip-card { perspective: 800px; height: 220px; cursor: pointer; } .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; border: 1px solid var(--rule); } .flip-card-front { background: #fff; } .flip-card-front .icon { font-size: 2.5rem; margin-bottom: 10px; } .flip-card-front h3 { font-size: 1.1rem; color: var(--ink); } .flip-card-back { background: var(--accent-light); transform: rotateY(180deg); } .flip-card-back h4 { font-size: 1rem; color: var(--accent2); margin-bottom: 8px; } .flip-card-back p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; } .flip-card-back .example { margin-top: 10px; font-size: 0.8rem; color: var(--accent); background: rgba(255,255,255,0.6); padding: 6px 10px; border-radius: 6px; } .control-panel { margin-bottom: 20px; } @media (max-width: 768px) { .cards-wrapper { grid-template-columns: 1fr; } .flip-card { height: 180px; } } </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" class="active">1.2.2 ADT拆解</a> <a href="h5-1-4a.html">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.2.2 ADT概念拆解�?/h1> <p class="subtitle">以具体ADT为例，拆解数据对象、数据关系、基本操作三要素</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">选择ADT类型，点击卡片翻转查看详细说明，或使用控制面板自动播�?/div> <div class="adt-selector"> <button class="active" data-adt="stack">�?(Stack)</button> <button data-adt="queue">队列 (Queue)</button> <button data-adt="list">线性表 (List)</button> </div> <div class="cards-wrapper"> <div class="flip-card" id="card0" data-index="0"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="icon">📦</div> <h3>数据对象</h3> </div> <div class="flip-card-back"> <h4>数据对象</h4> <p id="desc0">具有相同性质的数据元素的集合</p> <div class="example" id="example0">例如：D = {ai | ai �?ElemSet, i=1,2,...,n}</div> </div> </div> </div> <div class="flip-card" id="card1" data-index="1"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="icon">🔗</div> <h3>数据关系</h3> </div> <div class="flip-card-back"> <h4>数据关系</h4> <p id="desc1">数据元素之间的逻辑关系</p> <div class="example" id="example1">例如：R = {<ai-1, ai> | ai-1, ai �?D}</div> </div> </div> </div> <div class="flip-card" id="card2" data-index="2"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="icon">⚙️</div> <h3>基本操作</h3> </div> <div class="flip-card-back"> <h4>基本操作</h4> <p id="desc2">对数据对象可进行的运�?/p> <div class="example" id="example2">例如：InitStack, Push, Pop, GetTop</div> </div> </div> </div> </div> </div> </main> <script src="../shared/js/common.js"></script> <script> (function() { 'use strict'; const adtData = { stack: { objDesc: '栈是限定仅在表尾进行插入或删除操作的线性表�?, objEx: 'D = {ai | ai �?ElemSet, i=1,2,...,n, n�?}', relDesc: '数据元素之间是一对一的线性关系，但操作受限：仅能在栈顶（表尾）进行操作�?, relEx: 'R = {<ai-1, ai> | ai-1, ai �?D, i=2,...,n}', opDesc: 'InitStack(&S), DestroyStack(&S), ClearStack(&S), StackEmpty(S), StackLength(S), GetTop(S, &e), Push(&S, e), Pop(&S, &e)', opEx: 'Push: 插入元素e为新的栈�?| Pop: 删除栈顶元素并用e返回其�? }, queue: { objDesc: '队列是只允许在表的一端插入、另一端删除的线性表�?, objEx: 'D = {ai | ai �?ElemSet, i=1,2,...,n, n�?}', relDesc: '数据元素之间是一对一的线性关系，插入端为队尾，删除端为队头�?, relEx: 'R = {<ai-1, ai> | ai-1, ai �?D, i=2,...,n}', opDesc: 'InitQueue(&Q), DestroyQueue(&Q), ClearQueue(&Q), QueueEmpty(Q), QueueLength(Q), GetHead(Q, &e), EnQueue(&Q, e), DeQueue(&Q, &e)', opEx: 'EnQueue: 插入元素e为新的队�?| DeQueue: 删除队头元素并用e返回其�? }, list: { objDesc: '线性表是具有相同数据类型的n个数据元素的有限序列�?, objEx: 'D = {ai | ai �?ElemSet, i=1,2,...,n, n�?}', relDesc: '数据元素之间是一对一的线性关系，每个元素（除首尾外）有唯一前驱和后继�?, relEx: 'R = {<ai-1, ai> | ai-1, ai �?D, i=2,...,n}', opDesc: 'InitList(&L), DestroyList(&L), ClearList(&L), ListEmpty(L), ListLength(L), GetElem(L, i, &e), LocateElem(L, e), PriorElem(L, cur, &pre), NextElem(L, cur, &next), ListInsert(&L, i, e), ListDelete(&L, i, &e)', opEx: 'ListInsert: 在第i个位置插入元素e | ListDelete: 删除第i个元素并用e返回' } }; const cards = document.querySelectorAll('.flip-card'); const statusBar = document.getElementById('statusBar'); let currentADT = 'stack'; let flipped = [false, false, false]; let animStep = 0; let isPlaying = false; let timer = null; let speed = 500; function setADT(adt) { currentADT = adt; const data = adtData[adt]; document.getElementById('desc0').textContent = data.objDesc; document.getElementById('example0').textContent = data.objEx; document.getElementById('desc1').textContent = data.relDesc; document.getElementById('example1').textContent = data.relEx; document.getElementById('desc2').textContent = data.opDesc; document.getElementById('example2').textContent = data.opEx; // reset flip flipped = [false, false, false]; animStep = 0; isPlaying = false; clearTimeout(timer); cards.forEach(c => c.classList.remove('flipped')); statusBar.textContent = `已切换至: ${adt === 'stack' ? '�? : adt === 'queue' ? '队列' : '线性表'} �?点击卡片或播放按钮查看三要素`; } function flipCard(index) { if (index < 0 || index > 2) return; flipped[index] = !flipped[index]; cards[index].classList.toggle('flipped'); const names = ['数据对象', '数据关系', '基本操作']; statusBar.textContent = `${flipped[index] ? '展开' : '收起'}: ${names[index]}`; } function playAnim() { if (isPlaying) return; isPlaying = true; function next() { if (!isPlaying) return; if (animStep < 3) { if (!flipped[animStep]) flipCard(animStep); animStep++; timer = setTimeout(next, speed); } else { isPlaying = false; statusBar.textContent = '三要素展示完�?; } } next(); } function pauseAnim() { isPlaying = false; clearTimeout(timer); statusBar.textContent = '动画已暂�?; } function stepFwd() { if (animStep < 3) { if (!flipped[animStep]) flipCard(animStep); animStep++; } } function stepBack() { if (animStep > 0) { animStep--; if (flipped[animStep]) flipCard(animStep); } } function resetAnim() { isPlaying = false; clearTimeout(timer); animStep = 0; flipped = [false, false, false]; cards.forEach(c => c.classList.remove('flipped')); statusBar.textContent = '已重�?; } cards.forEach(card => { card.addEventListener('click', () => { const idx = parseInt(card.dataset.index); flipCard(idx); }); }); document.querySelectorAll('.adt-selector button').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.adt-selector button').forEach(b => b.classList.remove('active')); btn.classList.add('active'); setADT(btn.dataset.adt); }); }); 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); }); setADT('stack'); })(); </script> </body> </html>