请求开发展示Enqueue、Dequeue、Overflow的队列数据结构JavaScript动画

Hey there! 我特意给你写了一个纯前端的队列动画Demo，完全用HTML、CSS和JavaScript实现，能清晰展示Enqueue（入队）、Dequeue（出队）和Overflow（溢出）这三个关键操作，而且元素移动有平滑动画，一眼就能看明白队列的运作机制。直接把下面的代码保存成HTML文件就能在浏览器里运行啦！

完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Queue Animation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 50px;
            background-color: #f0f0f0;
        }

        .queue-container {
            display: flex;
            gap: 10px;
            margin: 30px 0;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            min-width: 400px;
            justify-content: center;
        }

        .queue-item {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            transition: transform 0.3s ease;
        }

        .controls {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background-color: #2563eb;
            color: white;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s;
        }

        button:hover {
            background-color: #1d4ed8;
        }

        #status {
            font-size: 18px;
            font-weight: bold;
            color: #dc2626;
            min-height: 24px;
        }
    </style>
</head>
<body>
    <h1>Queue Data Structure Animation</h1>
    <div class="queue-container" id="queueContainer"></div>
    <div class="controls">
        <button onclick="enqueue()">Enqueue</button>
        <button onclick="dequeue()">Dequeue</button>
        <button onclick="clearQueue()">Clear Queue</button>
    </div>
    <div id="status"></div>

    <script>
        // 队列配置
        const QUEUE_CAPACITY = 5;
        let queue = [];
        let front = 0;
        let rear = -1;
        const queueContainer = document.getElementById('queueContainer');
        const statusElement = document.getElementById('status');

        // 生成随机颜色
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // 更新队列UI
        function updateQueueUI() {
            queueContainer.innerHTML = '';
            // 渲染当前队列中的元素
            for (let i = front; i <= rear; i++) {
                const item = document.createElement('div');
                item.className = 'queue-item';
                item.style.backgroundColor = queue[i].color;
                item.textContent = queue[i].value;
                queueContainer.appendChild(item);
            }
            // 渲染空的占位（直观展示队列容量）
            const emptySlots = QUEUE_CAPACITY - (rear - front + 1);
            for (let i = 0; i < emptySlots; i++) {
                const emptyItem = document.createElement('div');
                emptyItem.className = 'queue-item';
                emptyItem.style.backgroundColor = '#e5e7eb';
                queueContainer.appendChild(emptyItem);
            }
        }

        // 入队操作
        function enqueue() {
            if (rear === QUEUE_CAPACITY - 1) {
                // 溢出状态
                statusElement.textContent = 'Overflow: Queue is full!';
                setTimeout(() => statusElement.textContent = '', 2000);
                return;
            }
            const value = Math.floor(Math.random() * 100);
            const color = getRandomColor();
            rear++;
            queue[rear] = { value, color };
            updateQueueUI();
            statusElement.textContent = `Enqueued: ${value}`;
            setTimeout(() => statusElement.textContent = '', 1500);
        }

        // 出队操作
        function dequeue() {
            if (front > rear) {
                // 队列为空
                statusElement.textContent = 'Queue is empty!';
                setTimeout(() => statusElement.textContent = '', 2000);
                return;
            }
            const dequeuedValue = queue[front].value;
            front++;
            updateQueueUI();
            statusElement.textContent = `Dequeued: ${dequeuedValue}`;
            setTimeout(() => statusElement.textContent = '', 1500);
        }

        // 清空队列
        function clearQueue() {
            queue = [];
            front = 0;
            rear = -1;
            updateQueueUI();
            statusElement.textContent = 'Queue cleared!';
            setTimeout(() => statusElement.textContent = '', 1500);
        }

        // 初始化UI
        updateQueueUI();
    </script>
</body>
</html>

功能说明 #

• Enqueue按钮：点击后往队列尾部添加一个随机数值、随机颜色的元素。如果队列已经达到预设容量（这里设为5），会触发Overflow提示，告诉你队列已满
• Dequeue按钮：点击后移除队列最前端的元素，队列里剩下的元素会自动往前补位。如果队列为空，会提示无法执行出队操作
• Clear Queue按钮：一键清空整个队列，方便重新演示
• 状态提示：每次操作后都会在下方显示操作结果，2秒后自动消失，不会干扰后续操作
• 视觉区分：随机颜色的元素让每一次入队的元素都更易识别，队列容量也通过灰色占位块直观展示

关键实现细节 #

• 用数组queue模拟队列核心存储，配合front和rear指针精准跟踪队列的头尾位置，严格遵循队列的操作规则
• 队列容量可通过修改QUEUE_CAPACITY变量自由调整，想测试不同容量的队列直接改这个值就行
• 操作反馈采用定时自动消失的方式，既保证信息清晰，又不会一直占用页面空间

内容的提问来源于stack exchange，提问作者Hacker10