练习清单的状态反馈

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>任务状态与温和反馈｜9.1免费版代码</title>
<meta name="description" content="9.1免费版代码：原创练习任务清单用 checkbox、可见完成数、aria-live 与安全文字插入演示状态反馈，只在内存保留，附 MIT 源码。">
<meta name="keywords" content="9.1免费版代码，原创网页示例，HTML，CSS，JavaScript">
<link rel="canonical" href="https://91-web.cn/examples/status-feedback.html">
<meta name="theme-color" content="#faf7ef">
<style>*{box-sizing:border-box}html{scroll-padding-top:1.5rem}body{margin:0;background:#faf7ef;color:#142e4c;font:16px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif}a{color:#075e56;text-underline-offset:.2em}a:hover{color:#0d473f}button,input,select,textarea{font:inherit}button,.button{min-height:44px;border:1px solid #0a635b;border-radius:9px;background:#0a635b;color:#fff;padding:.65rem 1rem;cursor:pointer;font-weight:650;display:inline-block;text-decoration:none}button:hover,.button:hover{background:#084f48;color:#fff}button:disabled{cursor:not-allowed;opacity:.6}.secondary{background:#fff;color:#075e56}.secondary:hover{background:#e5f4ec;color:#075e56}input,select,textarea{width:100%;min-height:44px;padding:.65rem;border:1px solid #869993;border-radius:8px;background:#fff;color:#142e4c}input[type=checkbox]{width:auto;min-height:0;accent-color:#0a635b}label{display:block;font-weight:650;margin-bottom:.3rem}fieldset{border:1px solid #c3d4cd;border-radius:12px;padding:1rem;margin:1rem 0}legend{padding:0 .4rem;font-weight:700}h1{font-size:clamp(1.7rem,4.5vw,2.7rem);line-height:1.2;max-width:24ch}h2{font-size:1.5rem;line-height:1.35;margin-top:0}h3{font-size:1.1rem}p{margin:.7rem 0}header,main,footer{width:min(100% - 2rem,920px);margin-inline:auto}header{padding:2rem 0 1.2rem;border-bottom:1px solid #c3d4cd}.eyebrow{color:#37625b;font-size:.85rem;letter-spacing:.06em;font-weight:750}.lead{font-size:1.1rem;max-width:65ch}.notice{border-left:4px solid #d69b3b;padding:.75rem 1rem;background:#fff7df;font-size:.94rem}main{padding:1.5rem 0 3rem}section{margin:0 0 1.4rem;padding:1.3rem;border:1px solid #d2ddd3;background:#fff;border-radius:14px;box-shadow:0 5px 15px #142e4c06}.demo{background:#ecf6ee;border-color:#a6c5b9}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}.field{margin-bottom:1rem}.help{font-size:.9rem;color:#47635c}.error{color:#a32118;font-weight:650}input[aria-invalid=true],select[aria-invalid=true]{border:2px solid #a32118}.summary{padding:1rem;border:2px solid #a32118;border-radius:8px;background:#fff5f3}.result{padding:1rem;border:1px solid #9cbeaf;border-radius:9px;background:#fff;margin-top:1rem}.status{min-height:1.8em;color:#27554b;margin:.8rem 0}.badge{font-size:.85rem;padding:.18rem .55rem;border-radius:99px;background:#dcefe6;color:#164e43}.scroll{overflow-x:auto;border:1px solid #b9cdc2;border-radius:9px}table{width:100%;border-collapse:collapse;min-width:540px;background:#fff}caption{text-align:left;font-weight:700;padding:1rem;background:#e5f1e9}th,td{padding:.8rem;border-bottom:1px solid #ceddd3;text-align:left}thead th{background:#f1f6f0}tbody th{font-weight:650}pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:1rem;background:#142e4c;color:#eaf6ed;border-radius:9px;font:14px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.93em}.downloads{display:flex;gap:.7rem;flex-wrap:wrap;margin:1rem 0}footer{border-top:1px solid #c3d4cd;padding:1.5rem 0 2rem;font-size:.9rem}.skip{position:absolute;left:1rem;top:-6rem;background:#142e4c;color:#fff;padding:.7rem;z-index:20}.skip:focus{top:.6rem}:focus-visible{outline:3px solid #b66a00;outline-offset:4px}[hidden]{display:none!important}.task-list{list-style:none;padding:0}.task-list li{padding:.8rem;border-bottom:1px solid #ceddd3;display:flex;align-items:center;gap:.8rem}.task-list label{font-weight:500;margin:0;display:flex;gap:.7rem;align-items:center;flex:1}.task-list .done .task-name{text-decoration:line-through;color:#557067}.task-list button{font-size:.9rem}.outline-mode nav,.outline-mode main,.outline-mode header,.outline-mode footer{outline:2px dashed #b66a00;outline-offset:3px}@media(max-width:640px){.grid{grid-template-columns:1fr}section{padding:1rem}header,main,footer{width:min(100% - 1.2rem,920px)}.downloads .button{width:100%;text-align:center}.task-list li{align-items:flex-start;flex-wrap:wrap}.task-list label{min-width:100%}}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}</style>
</head>
<body>
<a class="skip" href="#main">跳到主要内容</a>
<header>
<p class="eyebrow">91-WEB · 原创学习示例</p>
<p><a href="https://91-web.cn/">本站学习首页</a> · <a href="#learn">代码讲解</a> · <a href="#download">源文件与许可</a></p>
<h1>任务状态与温和反馈</h1>
<p class="lead">添加和完成任务后，页面既要改变外观，也要给出可读的文字结果。此例用短状态消息说明发生了什么，刷新后恢复初始任务。</p>
<p class="notice">围绕检索词“9.1免费版代码”提供原创练习。“9.1”在本站仅是未确认的检索或版本线索；本示例由 91-web.cn 为网页制作学习编写，不是任何 9.1 产品的官方代码，也不提供未经核验的产品安装包。</p>
</header>
<main id="main" tabindex="-1">
<section class="demo" aria-labelledby="demo-heading">
<h2 id="demo-heading">动手示例</h2>
<fieldset id="task-controls" disabled><legend>添加练习任务</legend><div class="field"><label for="new-task">任务名称</label><input id="new-task" maxlength="60" autocomplete="off" aria-describedby="new-task-help"><p id="new-task-help" class="help">1–60 个字符；最多保留 20 项，不输入隐私数据。</p></div><button id="add-task" type="button">添加任务</button></fieldset>
<p id="progress">完成 0 / 2 项</p>
<ul id="practice-tasks" class="task-list"><li><label><input type="checkbox" disabled><span class="task-name">给页面补充清晰的主标题</span></label><span class="badge task-state">待完成</span></li><li><label><input type="checkbox" disabled><span class="task-name">检查表单 label 与 id</span></label><span class="badge task-state">待完成</span></li></ul>
<p id="task-status" class="status" role="status" aria-live="polite" aria-atomic="true"></p>
<button id="reset-tasks" type="button" class="secondary" disabled>恢复两项初始任务</button>
</section>
<section id="learn" aria-labelledby="learn-heading">
<h2 id="learn-heading">这段代码解决什么问题</h2>
<p>原生复选框表示“完成”这个布尔状态，标签让操作目标明确。完成数、文字徽标和删除按钮名称随任务状态变化；颜色和删除线只是辅助提示。</p><p><code>aria-live="polite"</code> 的状态区域在初始 HTML 就存在，脚本随后更新其中的短句。它通常让辅助技术在合适的间隙报告变化，具体朗读由浏览器和辅助技术组合决定；本例不承诺每种设备都得到相同结果。</p><ul><li>添加时用 createElement 和 textContent，不把任务文字拼成 HTML。</li><li>完成操作保持焦点在复选框；删除后移到邻近任务的复选框，清空时移回输入框。</li><li>无持久存储、无账号、无同步；可用作状态练习，不是团队待办服务。</li><li>任务数量上限和长度限制只用于这个小练习，生产系统仍需相应服务端校验。</li></ul>
<h3>关键片段</h3>
<pre><code>&lt;p id=&quot;task-status&quot; role=&quot;status&quot;
  aria-live=&quot;polite&quot; aria-atomic=&quot;true&quot;&gt;&lt;/p&gt;
// 更新已有状态区域，不移动完成操作的焦点
status.textContent = &quot;已完成任务。当前完成 1 / 2 项。&quot;;
// 用户输入作为文字显示
nameNode.textContent = input.value.trim();</code></pre>
<p class="help">这里展示关键片段；完整 HTML、CSS 和 JavaScript 在下载包及源文件 TXT 中。TXT 保存为 UTF-8 的 .html 后可打开。</p>
</section>
<section id="download" aria-labelledby="download-heading">
<h2 id="download-heading">运行条件与源文件</h2>
<p>解压 ZIP 后，用支持现代 HTML、CSS、JavaScript 的浏览器直接打开 <code>status-feedback.html</code>。无需安装依赖、启动构建工具或连接服务；下载包中的文件没有外部字体、样式、图片、模块导入或网络请求。在线参考链接只有点击后才访问对应网站。</p>
<p>关闭 JavaScript 仍可阅读本文和初始示例内容；动态操作按钮保留禁用状态或静态内容，不表示已运行交互。 本例没有做浏览器兼容性认证或辅助技术实测，学习者可按自己的设备验证键盘操作和朗读结果。</p>
<div class="downloads"><a class="button" href="../downloads/status-feedback.zip" download>下载本例 ZIP</a><a class="button secondary" href="../downloads/status-feedback-source.txt" download>完整源文件 TXT</a><a class="button secondary" href="../downloads/webpage-practice-pack.zip" download>下载五例合集</a></div>
<p>本站原创示例代码使用 MIT License，允许修改和再分发，发布代码副本时须保留版权与许可文本。许可不保证代码适合任何特定生产场景；生产环境需另接合适的服务和测试。<a href="../downloads/LICENSE.txt">查看完整 MIT 许可</a> · <a href="../downloads/status-feedback-README.txt">运行说明</a></p>
</section>
<section aria-labelledby="sources-heading"><h2 id="sources-heading">进一步阅读</h2><p>以下官方资料用于核对语义和 API 行为，本站示例及文字为原创编写。</p><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-live">MDN：aria-live 状态更新</a>（在线参考，访问需网络）</li><li><a href="https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html">W3C：状态消息的理解</a>（在线参考，访问需网络）</li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent">MDN：Node.textContent</a>（在线参考，访问需网络）</li></ul></section>
</main>
<footer><p>91-web.cn 原创网页练习 · 精确检索词：9.1免费版代码</p><p>页面示例只处理当前内存中的学习数据。源文件的 MIT 许可只覆盖本站原创示例代码，不替代链接资料各自的许可。</p></footer>
<script>
// Copyright (c) 2026 91-web.cn contributors — MIT License.
'use strict';
const taskControls = document.getElementById('task-controls');
const taskInput = document.getElementById('new-task');
const addButton = document.getElementById('add-task');
const taskList = document.getElementById('practice-tasks');
const progress = document.getElementById('progress');
const status = document.getElementById('task-status');
const resetButton = document.getElementById('reset-tasks');
const initialNames = ['给页面补充清晰的主标题', '检查表单 label 与 id'];
taskControls.disabled = false; resetButton.disabled = false;
function updateProgress(message) {
  const total = taskList.children.length;
  const done = taskList.querySelectorAll('input:checked').length;
  progress.textContent = '完成 ' + done + ' / ' + total + ' 项';
  if (message) status.textContent = message + ' 当前' + progress.textContent + '。';
}
function addRow(name) {
  const li = document.createElement('li');
  const label = document.createElement('label');
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  const text = document.createElement('span');
  text.className = 'task-name'; text.textContent = name;
  const state = document.createElement('span');
  state.className = 'badge task-state'; state.textContent = '待完成';
  const remove = document.createElement('button');
  remove.type = 'button'; remove.className = 'secondary'; remove.textContent = '删除';
  remove.setAttribute('aria-label', '删除任务：' + name);
  label.append(checkbox, text); li.append(label, state, remove); taskList.append(li);
  checkbox.addEventListener('change', () => {
    li.classList.toggle('done', checkbox.checked);
    state.textContent = checkbox.checked ? '已完成' : '待完成';
    updateProgress((checkbox.checked ? '已完成：' : '恢复待完成：') + name + '。');
  });
  remove.addEventListener('click', () => {
    const neighbor = li.nextElementSibling || li.previousElementSibling;
    li.remove();
    updateProgress('已删除：' + name + '。');
    if (neighbor) neighbor.querySelector('input').focus(); else taskInput.focus();
  });
}
function restoreTasks(announce) {
  taskList.replaceChildren();
  initialNames.forEach(addRow);
  taskInput.value = '';
  updateProgress(announce ? '已恢复两项初始任务。' : '');
}
function addTask() {
  const name = taskInput.value.trim();
  if (!name || Array.from(name).length > 60) {
    status.textContent = '任务名称需为 1–60 个字符。'; taskInput.focus(); return;
  }
  if (taskList.children.length >= 20) {
    status.textContent = '已达到 20 项上限，请先删除不需要的任务。'; return;
  }
  addRow(name); taskInput.value = ''; updateProgress('已添加：' + name + '。'); taskInput.focus();
}
restoreTasks(false);
addButton.addEventListener('click', addTask);
taskInput.addEventListener('keydown', event => { if (event.key === 'Enter') { event.preventDefault(); addTask(); } });
resetButton.addEventListener('click', () => { restoreTasks(true); taskInput.focus(); });
</script>
</body>
</html>