1、栈与堆的演示
（1）网页视图
（2）代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>栈和堆演示</title><style>body {font-family: Arial, sans-serif;text-align: center;}.container {display: flex;justify-content: space-around;margin: 20px;}.stack, .heap {border: 2px solid #000;width: 150px;height: 300px;position: relative;}.stack div, .heap div {width: 100%;height: 30px;background: #4CAF50;margin: 2px 0;transition: all 0.3s ease;}.heap div {background: #2196F3;}</style>
</head>
<body><h1>栈和堆演示</h1><div class="container"><div class="stack" id="stack"><h2>栈</h2></div><div class="heap" id="heap"><h2>堆</h2></div></div><button onclick="pup1()">压栈</button><button onclick="pup2()">弹栈</button><button onclick="pup3()">分配堆</button><button onclick="pup4()">释放堆</button><script>let stack = [];let heap = [];function pup1() {const value = Math.floor(Math.random() * 100);stack.push(value);updateStackDisplay();}function pup2() {if (stack.length > 0) {stack.pop();updateStackDisplay();}}function allocateHeap() {const value = Math.floor(Math.random() * 100);heap.push(value);updateHeapDisplay();}function deallocateHeap() {if (heap.length > 0) {heap.pop();updateHeapDisplay();}}function updateStackDisplay() {const stackDiv = document.getElementById('stack');stackDiv.innerHTML = '<h2>栈</h2>';stack.forEach(item => {const div = document.createElement('div');div.innerText = item;stackDiv.appendChild(div);});}function updateHeapDisplay() {const heapDiv = document.getElementById('heap');heapDiv.innerHTML = '<h2>堆</h2>';heap.forEach(item => {const div = document.createElement('div');div.innerText = item;heapDiv.appendChild(div);});}</script>
</body>
</html>