矩阵计算器布局调整与单HTML文件整合技术咨询

需求概述 #

• 使Matrix A与Matrix B处于同一行且整体居中
• 调整功能按钮布局至居中位置，保持元素尺寸一致
• 将分离的HTML、CSS、JavaScript代码整合为单个HTML文件

完整优化代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matrix Calculator</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            padding: 2rem;
        }

        h1 {
            text-align: center;
            margin-bottom: 2rem;
        }

        /* 矩阵容器：实现同行居中 */
        .matrices-container {
            display: flex;
            justify-content: center;
            gap: 3rem;
            margin-bottom: 2rem;
        }

        .matrix-section {
            text-align: center;
        }

        .matrix-section h2 {
            margin-bottom: 1rem;
        }

        .matrix-inputs {
            display: grid;
            grid-template-columns: repeat(2, 60px);
            gap: 8px;
        }

        .matrix-inputs input {
            width: 60px;
            height: 60px;
            text-align: center;
            font-size: 1.2rem;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* 按钮容器：居中且统一尺寸 */
        .buttons-container {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .buttons-container button {
            padding: 0.8rem 1.5rem;
            font-size: 1rem;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            min-width: 120px;
            transition: background-color 0.3s;
        }

        .buttons-container button:hover {
            background-color: #0056b3;
        }

        /* 结果区域 */
        .result-section {
            text-align: center;
            margin-top: 2rem;
        }

        .result-section h2 {
            margin-bottom: 1rem;
        }

        #result-matrix {
            display: inline-grid;
            grid-template-columns: repeat(2, 60px);
            gap: 8px;
        }

        .result-cell {
            width: 60px;
            height: 60px;
            border: 1px solid #ccc;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <h1>Matrix Calculator</h1>

    <div class="matrices-container">
        <div class="matrix-section">
            <h2>Matrix A</h2>
            <div class="matrix-inputs" id="matrix-a">
                <input type="number" value="1">
                <input type="number" value="2">
                <input type="number" value="3">
                <input type="number" value="4">
            </div>
        </div>

        <div class="matrix-section">
            <h2>Matrix B</h2>
            <div class="matrix-inputs" id="matrix-b">
                <input type="number" value="5">
                <input type="number" value="6">
                <input type="number" value="7">
                <input type="number" value="8">
            </div>
        </div>
    </div>

    <div class="buttons-container">
        <button onclick="addMatrices()">Add</button>
        <button onclick="subtractMatrices()">Subtract</button>
        <button onclick="multiplyMatrices()">Multiply</button>
        <button onclick="clearMatrices()">Clear</button>
    </div>

    <div class="result-section">
        <h2>Result</h2>
        <div id="result-matrix"></div>
    </div>

    <script>
        function getMatrixValues(matrixId) {
            const inputs = document.querySelectorAll(`#${matrixId} input`);
            return Array.from(inputs).map(input => parseFloat(input.value) || 0);
        }

        function renderResult(result) {
            const resultContainer = document.getElementById('result-matrix');
            resultContainer.innerHTML = '';
            result.forEach(value => {
                const cell = document.createElement('div');
                cell.className = 'result-cell';
                cell.textContent = value;
                resultContainer.appendChild(cell);
            });
        }

        function addMatrices() {
            const a = getMatrixValues('matrix-a');
            const b = getMatrixValues('matrix-b');
            const result = a.map((val, idx) => val + b[idx]);
            renderResult(result);
        }

        function subtractMatrices() {
            const a = getMatrixValues('matrix-a');
            const b = getMatrixValues('matrix-b');
            const result = a.map((val, idx) => val - b[idx]);
            renderResult(result);
        }

        function multiplyMatrices() {
            const a = getMatrixValues('matrix-a');
            const b = getMatrixValues('matrix-b');
            const result = [
                a[0]*b[0] + a[1]*b[2],
                a[0]*b[1] + a[1]*b[3],
                a[2]*b[0] + a[3]*b[2],
                a[2]*b[1] + a[3]*b[3]
            ];
            renderResult(result);
        }

        function clearMatrices() {
            document.querySelectorAll('.matrix-inputs input').forEach(input => input.value = '0');
            document.getElementById('result-matrix').innerHTML = '';
        }
    </script>
</body>
</html>

关键优化说明 #

1. 同行居中的矩阵布局：通过flexbox实现.matrices-container的水平居中排列，使用gap控制矩阵间间距，每个矩阵区块内部文本居中对齐，保证视觉一致性。
2. 统一尺寸的居中按钮：buttons-container采用flexbox居中布局，给按钮设置min-width确保尺寸一致，添加flex-wrap适配小屏幕，同时统一内边距、字体大小和交互样式。
3. 单文件整合：将CSS样式嵌入<style>标签、JavaScript代码嵌入<script>标签，所有功能代码合并到单个HTML文件中，便于直接运行和部署。

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