r93/timer.html · 约 2904 字符
1<!doctype html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>番茄计时</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <header class="top">
12 <div class="top-l">专注者 · 小满</div>
13 <div class="top-r">番茄计时</div>
14 </header>
15 <main class="main">
16<div class="card" style="text-align:center">
17 <div class="seg" style="margin-bottom:14px">
18 <div class="sg on"><button>🍅 专注 25</button></div>
19 <div class="sg"><button>☕ 短休 5</button></div>
20 <div class="sg"><button>🌙 长休 15</button></div>
21 </div>
22 <div class="timer"><div class="t" id="t">25:00</div><div class="s" id="s">第 2 回合 · 撰写产品周报</div></div>
23 <div class="row" style="gap:10px">
24 <button class="btn full" id="toggle" style="flex:2">开始专注</button>
25 <button class="btn line" style="flex:1" onclick="resetTimer()">重置</button>
26 </div>
27</div>
28<div class="card">
29 <div class="sec-title"><span>🔁</span> 回合设置</div>
30 <div class="row"><div class="muted">专注时长</div><b>25 分钟</b></div>
31 <div class="row" style="margin-top:10px"><div class="muted">每日目标回合</div><b>5 回合</b></div>
32 <div class="row" style="margin-top:10px"><div class="muted">自动开始休息</div><span class="switch on" onclick="this.classList.toggle('on')"></span></div>
33</div>
34</main>
35 <nav class="nav"><a class="" href="index.html"><span class="ic">🍅</span>今日</a><a class=" on" href="timer.html"><span class="ic">⏱️</span>计时</a><a class="" href="habits.html"><span class="ic">✅</span>习惯</a><a class="" href="habit_detail.html"><span class="ic">📖</span>详情</a><a class="" href="stats.html"><span class="ic">📊</span>统计</a><a class="" href="goals.html"><span class="ic">🎯</span>目标</a><a class="" href="sound.html"><span class="ic">🎵</span>白噪</a><a class="" href="calendar.html"><span class="ic">📅</span>日历</a><a class="" href="settings.html"><span class="ic">⚙️</span>设置</a></nav>
36</div>
37<script>
38let total=25*60, left=25*60, run=null;
39function fmt(s){let m=Math.floor(s/60),x=s%60;return (m<10?'0':'')+m+':'+(x<10?'0':'')+x;}
40function tick(){left--; if(left<0){left=0;clearInterval(run);run=null;document.getElementById('toggle').textContent='完成';return;} document.getElementById('t').textContent=fmt(left);}
41document.getElementById('toggle').onclick=function(){ if(run){clearInterval(run);run=null;this.textContent='继续';} else {run=setInterval(tick,1000);this.textContent='暂停';}};
42function resetTimer(){ if(run)clearInterval(run); run=null; left=total; document.getElementById('t').textContent=fmt(total); document.getElementById('toggle').textContent='开始专注';}
43</script>
44</body>
45</html>