创作4：用 AI 做打卡器

先确定作品要解决什么

每天是否打卡是一条记录，不是点了几次按钮。参考程序用当前电脑的本地日期区分每天，重复点击不会增加天数，误点可以撤销。记录只在当前浏览器；换电脑、换网址或清理浏览器后不会自动跟过去。

给 AI 的任务卡

把主题和内容换成自己的版本，先检查助手复述的需求再生成代码。使用家长或学校允许的编程工具；本站提供的代码是预写参考，没有调用实时 AI。记录实际借助了什么帮助。

请制作单文件 HTML 阅读打卡器。显示今天的本地日期和累计天数；同一天只记一次；支持撤销今天；在 localStorage 保存日期列表，刷新后读取。如果保存失败要告诉我。不要收集姓名，不上传记录，不设置排名。先解释保存在哪里，再给代码。

从可运行的起点开始

下方是完整参考代码，也已放入练习草稿。点击“导出当前草稿”，再在预览中点击“下载文件”；把下载的文件重命名为 tracker.html，保留 .html 后缀，在电脑浏览器中打开。先验证原版，再另存自己的版本。代码在本地运行，不会训练或调用 GuppyLM。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>我的阅读打卡</title>
<style>
*{box-sizing:border-box}body{font:18px/1.7 system-ui;margin:24px auto;padding:0 20px;max-width:720px;color:#183b36;background:#f7faf9}
h1{font-size:28px}h2{font-size:22px}button,input{font:inherit}button,a{touch-action:manipulation}button{padding:10px 16px;margin:4px;border:1px solid #287b68;border-radius:6px;background:white;color:#183b36;cursor:pointer}button:disabled{opacity:.5;cursor:default}a{color:#1468a0}label{display:block;padding:6px 0}section{border-top:1px solid #bfcfc8;padding:16px 0}p,li{overflow-wrap:anywhere}img{max-width:100%}:focus-visible{outline:3px solid #cc7600;outline-offset:3px}
</style>
<h1>我的阅读打卡</h1>
<p>目标：每天读一小段，记下一个发现。</p><p id="summary" role="status"></p>
<button id="check">今天已阅读</button><button id="undo">撤销今天</button>
<p id="storage-note"></p><h2>我的记录</h2><ul id="days"></ul>
<script>
const key = 'reading-days-v1';
let days = [];
let storageWarning = '';
try {
  const saved = JSON.parse(localStorage.getItem(key) || '[]');
  if (!Array.isArray(saved) || !saved.every(day => typeof day === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(day))) throw new Error('invalid');
  days = [...new Set(saved)].sort();
} catch { storageWarning = '未能读取旧记录；本页从空记录开始，请保留自己的备份。'; }
function today() {
  const d = new Date();
  return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0');
}
function render() {
  const date = today();
  const checked = days.includes(date);
  document.getElementById('summary').textContent = date + ' · ' + (checked ? '今天已打卡' : '今天还未打卡') + ' · 累计 ' + days.length + ' 天';
  document.getElementById('check').disabled = checked;
  document.getElementById('undo').disabled = !checked;
  document.getElementById('storage-note').textContent = storageWarning || '只保存在当前浏览器，不会跨设备同步；更换网址后记录也不会自动迁移。';
  const list = document.getElementById('days');
  list.replaceChildren();
  for (const day of [...days].reverse()) { const item = document.createElement('li'); item.textContent = day; list.append(item); }
}
function save() {
  try { localStorage.setItem(key, JSON.stringify(days)); storageWarning = ''; }
  catch { storageWarning = '保存失败：本次改动只在当前页面，刷新可能丢失。'; }
  render();
}
document.getElementById('check').onclick = () => { days = [...new Set([...days,today()])].sort(); save(); };
document.getElementById('undo').onclick = () => { days = days.filter(day => day !== today()); save(); };
window.addEventListener('focus',render);
render();
</script>
</html>

做一次有理由的修改

把阅读目标改成自己的一个小目标，如“观察植物并画一笔”。请 AI 只改主题和文案，保留日期去重、撤销和保存失败提示。保存文件后在同一个浏览器中测试；若直接打开文件无法保存，可由家长在本地预览或发布后的固定网址测试。

用实际操作验收

检查今天未打卡、点击后累计加1、同一天不能重复增加、刷新仍保留、撤销后恢复。更换浏览器再看，解释为什么不是同一份记录。不为测试修改系统日期，第二天再观察新日期。