上一課我們做出了個人效率工具箱首頁。這一課把其中的“番茄鐘”做成真正能用的小工具。完成后你可以設(shè)置 1120 分鐘的專注時間開始倒計時中途暫停再繼續(xù)計時。時間結(jié)束后頁面和瀏覽器標簽頁都會顯示提醒。這次學(xué)習的重點是怎樣讓 AI 在已有代碼上增加功能以及如何檢查新增功能有沒有按要求工作。先把上一課的完整代碼發(fā)給 AI再附上下面這段需求請在現(xiàn)有工具箱首頁中實現(xiàn)番茄鐘功能。默認時長為 25 分鐘允許輸入 1120 分鐘的整數(shù)。提供開始、暫停、繼續(xù)和重置操作。暫停后要保留剩余時間繼續(xù)時從剩余時間開始。重復(fù)點擊開始按鈕時只能有一個計時器運行。計時開始后鎖定時長輸入框重置或結(jié)束后允許調(diào)整。計時結(jié)束時在頁面上顯示提醒并修改瀏覽器標簽頁標題。使用結(jié)束時間減去當前時間來計算剩余時間。保留待辦清單和便簽卡片輸出完整 HTML 文件。這里的“暫停后保留剩余時間”“重復(fù)點擊只能啟動一個計時器”就是容易被遺漏的細節(jié)。把這些行為提前寫進需求后面就有明確的檢查標準。下面是一份完整參考代碼。用它替換上一課index.html中的內(nèi)容保存后用瀏覽器打開。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title個人效率工具箱/title style * { box-sizing: border-box; } body { margin: 0; color: #1f2937; background: #f5f7fb; font-family: Microsoft YaHei, Arial, sans-serif; } header, main, #message { max-width: 960px; margin-left: auto; margin-right: auto; } header { padding: 40px 20px 24px; } header h1 { margin: 0 0 12px; } header p, .card p { color: #6b7280; line-height: 1.6; } main { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 0 20px; } .card { padding: 24px; background: white; border-radius: 16px; box-shadow: 0 8px 24px #1f293712; } .card h2 { margin: 0 0 16px; font-size: 21px; } input { width: 80px; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 16px; } #clock { margin: 24px 0; font-size: 52px; font-weight: bold; text-align: center; font-variant-numeric: tabular-nums; } .controls { display: flex; flex-wrap: wrap; gap: 8px; } button { padding: 10px 14px; border: 0; border-radius: 8px; color: white; background: #4f46e5; cursor: pointer; } button:hover { background: #4338ca; } #status { min-height: 48px; } #message { padding: 16px 20px; color: #3730a3; } /style /head body header h1我的效率工具箱/h1 p先選一件事專注完成它。/p /header main article classcard h2 番茄鐘/h2 label forduration專注時長/label input idduration typenumber min1 max120 step1 value25 span分鐘/span div idclock25:00/div div classcontrols button idstart typebutton開始 / 繼續(xù)/button button idpause typebutton暫停/button button idreset typebutton重置/button /div p idstatus rolestatus準備開始/p /article article classcard h2? 待辦清單/h2 p記錄今天要完成的事情。/p button typebutton data-module待辦清單查看功能/button /article article classcard h2 便簽/h2 p隨手記下想法和提醒。/p button typebutton data-module便簽查看功能/button /article /main p idmessage rolestatus工具箱正在逐步完善。/p script const durationInput document.querySelector(#duration); const clock document.querySelector(#clock); const status document.querySelector(#status); let remainingMs 25 * 60 * 1000; let endAt 0; let timerId null; let started false; // 檢查輸入并將分鐘轉(zhuǎn)換成毫秒 function readDuration() { const minutes Number(durationInput.value); if (!Number.isInteger(minutes) || minutes 1 || minutes 120) { status.textContent 請輸入 1120 分鐘的整數(shù)。; return null; } return minutes * 60 * 1000; } // 將剩余時間顯示為 分鐘:秒 function render() { const totalSeconds Math.ceil(remainingMs / 1000); const minutes Math.floor(totalSeconds / 60); const seconds totalSeconds % 60; clock.textContent String(minutes).padStart(2, 0) : String(seconds).padStart(2, 0); } function stopTimer() { clearInterval(timerId); timerId null; } function finish() { stopTimer(); remainingMs 0; started false; durationInput.disabled false; render(); status.textContent 時間到完成一輪專注休息一下吧。; document.title 時間到效率工具箱; } function update() { remainingMs Math.max(0, endAt - Date.now()); render(); if (remainingMs 0) { finish(); } else { document.title clock.textContent 專注中; } } document.querySelector(#start).addEventListener(click, () { // 防止重復(fù)啟動計時器 if (timerId ! null) return; // 新的一輪讀取時長暫停后繼續(xù)則沿用剩余時間 if (!started) { const duration readDuration(); if (duration null) return; remainingMs duration; started true; } endAt Date.now() remainingMs; durationInput.disabled true; status.textContent 專注中……; timerId setInterval(update, 250); update(); }); document.querySelector(#pause).addEventListener(click, () { if (timerId null) return; update(); if (timerId null) return; stopTimer(); status.textContent 已暫停點擊開始可以繼續(xù)。; document.title 已暫停效率工具箱; }); function reset() { const duration readDuration(); if (duration null) return; stopTimer(); started false; durationInput.disabled false; remainingMs duration; render(); status.textContent 已重置可以調(diào)整時長。; document.title 個人效率工具箱; } document.querySelector(#reset).addEventListener(click, reset); durationInput.addEventListener(change, () { if (!started) reset(); }); // 返回頁面時立即更新剩余時間 document.addEventListener(visibilitychange, () { if (!document.hidden timerId ! null) update(); }); const message document.querySelector(#message); document.querySelectorAll([data-module]).forEach((button) { button.addEventListener(click, () { message.textContent button.dataset.module 將在后續(xù)課程逐步完成。; }); }); /script /body /html代碼里最值得理解的是這一句remainingMs Math.max(0, endAt - Date.now());endAt是預(yù)計結(jié)束的時間Date.now()是當前時間兩者相減就是剩余時間。這樣處理是因為setInterval()的實際執(zhí)行間隔可能比設(shè)置值更長。如果每次回調(diào)都簡單減一秒延遲可能逐漸累積。這里讓計時器負責更新顯示每次更新都重新計算剩余時間。參考MDN setInterval 文檔。打開網(wǎng)頁后先設(shè)置為 1 分鐘按下面的順序檢查點擊開始再連續(xù)點擊幾次倒計時應(yīng)保持正常速度。運行幾秒后點擊暫停等待一會兒顯示應(yīng)保持不變。點擊繼續(xù)倒計時應(yīng)從暫停的位置接著走。點擊重置時間應(yīng)回到設(shè)置值輸入框可以重新調(diào)整。輸入 0 后點擊開始頁面應(yīng)提示輸入范圍。完成一輪計時頁面和標簽頁標題應(yīng)出現(xiàn)結(jié)束提示。如果某一步失敗把操作過程、預(yù)期結(jié)果和實際結(jié)果一起告訴 AI。例如我設(shè)置了 1 分鐘運行 10 秒后暫停再點擊繼續(xù)時間重新變成了 1 分鐘。請檢查剩余時間的保存邏輯修復(fù)后保留其他功能。本課的結(jié)束提醒顯示在頁面和標簽頁標題中。瀏覽器可能降低后臺頁面的更新頻率返回頁面時程序會根據(jù)結(jié)束時間重新計算顯示。刷新頁面會恢復(fù)初始設(shè)置。參考MDN 頁面可見性文檔。下一課我們實現(xiàn)待辦清單讓工具箱可以新增任務(wù)、標記完成和刪除任務(wù)。