08. 条件判断与循环：状态驱动界面

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

订单状态

三、知识点提醒

当状态较多时，`switch` 比一长串 `if` 更清晰。
用对象做“状态字典”，可以减少硬编码。
循环适合生成步骤、菜单、表格行。

四、练习建议

增加“退款中”状态。
把进度渲染成 HTML 标签，而不是纯文本。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/08-conditions-loops.js，下面同步展示，方便学习和复制。

// 页面 08：条件判断、循环、状态展示
const statusSelect = document.querySelector('#p8-status');
const renderBtn = document.querySelector('#p8-render');
const statusOutput = document.querySelector('#p8-output');

const steps = ['pending', 'paid', 'shipped', 'completed'];
const labels = {
  pending: '待确认',
  paid: '已付款',
  shipped: '已发货',
  completed: '已完成',
  cancelled: '已取消'
};

function getStatusMessage(status) {
  switch (status) {
    case 'pending':
      return '订单已创建，等待客户确认。';
    case 'paid':
      return '订单已付款，可以安排备货。';
    case 'shipped':
      return '订单已发货，请跟踪物流。';
    case 'completed':
      return '订单已完成，可以邀请客户评价。';
    case 'cancelled':
      return '订单已取消，无需继续处理。';
    default:
      return '未知状态。';
  }
}

function renderProgress(status) {
  if (status === 'cancelled') {
    statusOutput.textContent = `状态：${labels[status]}\n${getStatusMessage(status)}`;
    return;
  }

  const activeIndex = steps.indexOf(status);
  let progressText = '';

  for (let index = 0; index < steps.length; index++) {
    const step = steps[index];
    const done = index <= activeIndex;
    progressText += `${done ? '✅' : '⬜'} ${labels[step]}\n`;
  }

  statusOutput.textContent = `${progressText}\n${getStatusMessage(status)}`;
}

renderBtn.addEventListener('click', () => renderProgress(statusSelect.value));
renderProgress(statusSelect.value);