r94/timer.html · 约 2646 字符
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="seg">
17 <div class="sg on"><button>🍅 专注 25</button></div>
18 <div class="sg"><button>☕ 短休 5</button></div>
19 <div class="sg"><button>🌙 长休 15</button></div>
20</div>
21<div class="ring" id="ring"><div class="ring-i"><div class="tnum" id="num">25:00</div><div class="tmode" id="mode">专注模式 · 第 2 回合</div></div></div>
22<div class="row" style="gap:10px;margin:6px 2px 14px">
23 <button class="btn full start" id="startBtn">开始专注</button>
24 <button class="btn line" onclick="resetTimer()">重置</button>
25</div>
26<div class="card"><div class="sec-title">📋 本回合任务</div>
27 <div class="habit"><div class="thumb t-ind">📚</div><div class="info"><div class="nm">阅读《深度工作》第 3 章</div><div class="sub">预计 1 个番茄 · 已用 0</div></div></div>
28</div>
29<div class="card"><div class="row"><div class="muted">🔔 专注结束自动播放提示音并切入短休</div></div></div>
30</main>
31 <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="stats.html"><span class="ic">📊</span>统计</a><a class="" href="settings.html"><span class="ic">⚙️</span>设置</a></nav>
32</div>
33<script>
34let TOTAL=25*60, t=TOTAL, running=false, id=null;
35const num=document.getElementById('num'), ring=document.getElementById('ring'), btn=document.getElementById('startBtn');
36function render(){const m=String(Math.floor(t/60)).padStart(2,'0'),s=String(t%60).padStart(2,'0');
37num.textContent=m+':'+s;const p=((TOTAL-t)/TOTAL)*100;
38ring.style.background='conic-gradient(#6366f1 '+p+'%, #27324a '+p+'%)';}
39function tick(){if(t>0){t--;render();}else{stop();btn.textContent='开始专注';}}
40function start(){if(running)return;running=true;id=setInterval(tick,1000);}
41function stop(){running=false;clearInterval(id);}
42btn.onclick=function(){if(running){stop();this.textContent='继续';}else{start();this.textContent='暂停';}};
43function resetTimer(){stop();t=TOTAL;render();btn.textContent='开始专注';}
44render();
45</script>
46</body>
47</html>