第 09 期 | Phase A: UI 与样式的并行开发

⏱ 预计阅读 6 分钟 更新于 2026/5/7
💡 进群学习加 wx: agentupdate
(申请发送: agentupdate)

9.1 实际产出

index.html（由 ui-dev 创建）

<!DOCTYPE html>
<html lang="zh-CN" data-theme="standard">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页计算器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>计算器</h1>
        <button id="btn-mode-toggle" aria-label="切换模式">切换模式</button>
    </header>

    <main>
        <div class="display">
            <div id="expression" class="expression-line" aria-live="polite"></div>
            <div id="result" class="result-line" aria-live="assertive">0</div>
        </div>

        <div class="button-grid">
            <button id="btn-clear" class="btn-wide" data-value="C" aria-label="清除">C</button>
            <button id="btn-backspace" class="btn-wide" data-value="⌫" aria-label="退格">⌫</button>
            <button id="btn-percent" class="btn-operator" data-value="%" aria-label="百分号">%</button>
            <button id="btn-divide" class="btn-operator" data-value="÷" aria-label="除">÷</button>

            <button id="btn-7" class="btn-number" data-value="7" aria-label="数字7">7</button>
            <!-- ... 4×5 按钮网格 ... -->
        </div>
    </main>

    <aside id="history-panel" aria-label="历史记录">
        <h2>历史记录</h2>
        <ul id="history-list"></ul>
    </aside>

    <script src="app.js"></script>
</body>
</html>

关键设计决策：

  • data-value 属性：统一存储按钮功能值，handleButtonClick() 通过此值分发
  • aria-live="assertive"：结果变更时自动播报给屏幕阅读器
  • data-theme="standard"：在 <html> 标签切换，CSS 变量自动生效

style.css（由 ui-dev 创建）— CSS 变量双模式

/* 标准模式变量 */
:root {
  --btn-bg: #e9ecef;
  --operator-bg: #ff9500;
  --text-color: #333333;
  --border-radius: 12px;
}

/* 老年模式变量 — 一行切换全部 */
[data-theme="senior"] {
  --btn-bg: #ffffff;
  --operator-bg: #000000;
  --text-color: #000000;
  --border-radius: 16px;
}

/* 按钮自动继承变量 */
.btn-number {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  height: 48px;                /* 标准 */
}
[data-theme="senior"] .btn-number {
  height: 80px;                /* 老年 */
}

/* 过渡动画 */
button { transition: all 0.3s; }

/* 响应式 */
@media (max-width: 768px) {
  .btn-number { height: 44px; }
  [data-theme="senior"] .btn-number { height: 72px; }
}