1<?php class=class="string">"keyword">header(class="string">'Content-Type: text/html; charset=utf-class="number">8'); ?>
2<!DOCTYPE html><class="tag">html lang="zh-CN"><class="tag">head><class="tag">meta charset="UTF-class="number">8"><class="tag">meta name="viewport" content="width=device-width,initial-scale=class="number">1.0">
3<class="tag">title>倒计时器 - η空间</class="tag">title>
4<class="tag">meta name="description" content="在线倒计时器，自定义时长，到点提醒。纯浏览器本地运行。">
5<class="tag">link rel="stylesheet" href="/tools/share.css"><class="tag">link rel="stylesheet" href="/assets/pet-cat.css">
6<class="tag">style>
7*{margin:class="number">0;padding:class="number">0;box-sizing:border-box}
8body{font-family:class="string">'Outfit',-apple-system,sans-serif;background:class=class="string">"keyword">class=class="string">"comment">#0C0C0C;color:#F7F5F0;min-height:100vh}
9.container{max-width:420px;margin:class="number">0 auto;padding:40px 16px;text-align:center}
10h1{font-size:24px;margin-bottom:8px}
11h1 .a{color:class=class="string">"keyword">class=class="string">"comment">#FF6B35}
12.desc{color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;font-size:13px;margin-bottom:30px}
13.display{font-size:64px;font-weight:class="number">700;font-family:class="string">'JetBrains Mono',monospace;margin:20px class="number">0;letter-spacing:4px}
14.display.warning{color:class=class="string">"keyword">class=class="string">"comment">#fb923c}
15.display.danger{color:class=class="string">"keyword">class=class="string">"comment">#ef4444;animation:pulse 1s infinite}
16@keyframes pulse{class="number">0%,class="number">100%{opacity:class="number">1}class="number">50%{opacity:class="number">0.5}}
17.input-group{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
18.input-group input{width:60px;padding:8px;background:class=class="string">"keyword">class=class="string">"comment">#0C0C0C;border:1px solid #class="number">333;border-radius:8px;color:#ccc;font-size:18px;text-align:center;font-family:class="string">'JetBrains Mono',monospace}
19.input-group input:focus{outline:none;border-color:class=class="string">"keyword">class=class="string">"comment">#FF6B35}
20.input-group label{display:flex;flex-direction:column;align-items:center;font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">888;gap:4px}
21.btn-group{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
22.btn{padding:10px 28px;border:none;border-radius:10px;font-size:14px;font-weight:class="number">600;cursor:pointer;transition:all .3s}
23.btn-start{background:class=class="string">"keyword">class=class="string">"comment">#FF6B35;color:#fff}
24.btn-start:hover{background:class=class="string">"keyword">class=class="string">"comment">#e85a2a}
25.btn-pause{background:class=class="string">"keyword">class=class="string">"comment">#fb923c;color:#class="number">000}
26.btn-reset{background:transparent;border:1px solid class=class="string">"keyword">class=class="string">"comment">#class="number">333;color:#ccc}
27.btn-reset:hover{border-color:class=class="string">"keyword">class=class="string">"comment">#FF6B35;color:#FF6B35}
28.presets{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
29.presets button{padding:6px 14px;border:1px solid class=class="string">"keyword">class=class="string">"comment">#class="number">333;background:transparent;border-radius:6px;color:#class="number">888;font-size:12px;cursor:pointer;transition:all .2s}
30.presets button:hover{border-color:class=class="string">"keyword">class=class="string">"comment">#FF6B35;color:#FF6B35}
31.presets button.active{background:class=class="string">"keyword">class=class="string">"comment">#FF6B35;color:#fff;border-color:#FF6B35}
32</class="tag">style></class="tag">head><class="tag">body>
33<class="tag">div class=class="string">"keyword">class="container">
34<class="tag">h1><class="tag">span class=class="string">"keyword">class="a">⏱</class="tag">span> 倒计时器</class="tag">h1>
35<class="tag">p style="font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555;margin-bottom:10px;text-align:center">⏱ 输入时分秒或点快捷按钮 · 到点自动响铃提醒</class="tag">p>
36<class="tag">p class=class="string">"keyword">class="desc">设个时间，到点提醒你</class="tag">p>
37<class="tag">div class=class="string">"keyword">class="display" id="display">class="number">00:class="number">00</class="tag">div>
38<class="tag">div class=class="string">"keyword">class="input-group">
39<class="tag">label>时 <class="tag">input type="text" id="hours" value="class="number">0" maxlength="class="number">2"></class="tag">label>
40<class="tag">label>分 <class="tag">input type="text" id="minutes" value="class="number">5" maxlength="class="number">2"></class="tag">label>
41<class="tag">label>秒 <class="tag">input type="text" id="seconds" value="class="number">0" maxlength="class="number">2"></class="tag">label>
42</class="tag">div>
43<class="tag">div class=class="string">"keyword">class="presets">
44<class="tag">button onclick="setPreset(class="number">0,class="number">1,class="number">0)">class="number">1分</class="tag">button>
45<class="tag">button onclick="setPreset(class="number">0,class="number">3,class="number">0)">class="number">3分</class="tag">button>
46<class="tag">button onclick="setPreset(class="number">0,class="number">5,class="number">0)">class="number">5分</class="tag">button>
47<class="tag">button onclick="setPreset(class="number">0,class="number">10,class="number">0)">class="number">10分</class="tag">button>
48<class="tag">button onclick="setPreset(class="number">0,class="number">30,class="number">0)">class="number">30分</class="tag">button>
49<class="tag">button onclick="setPreset(class="number">1,class="number">0,class="number">0)">class="number">1时</class="tag">button>
50</class="tag">div>
51<class="tag">div class=class="string">"keyword">class="btn-group">
52<class="tag">button class=class="string">"keyword">class="btn btn-start" id="mainBtn" onclick="toggleTimer()">▶ 开始</class="tag">button>
53<class="tag">button class=class="string">"keyword">class="btn btn-reset" onclick="resetTimer()">↺ 重置</class="tag">button>
54</class="tag">div>
55</class="tag">div>
56<class="tag">script src="/tools/share.js"></class="tag">script><class="tag">script src="/assets/pet-cat.js"></class="tag">script>
57<class="tag">script>
58class=class="string">"keyword">var totalSecs=class="number">0,remaining=class="number">0,isRunning=false,timer=null;
59class=class="string">"keyword">function setPreset(h,m,s){totalSecs=h*class="number">3600+m*class="number">60+s;remaining=totalSecs;
60 document.class="func">getElementById(class="string">'hours').value=h;
61 document.class="func">getElementById(class="string">'minutes').value=m;
62 document.class="func">getElementById(class="string">'seconds').value=s;
63 updateDisplay();resetTimer();
64}
65class=class="string">"keyword">function getInput(){class=class="string">"keyword">var h=parseInt(document.class="func">getElementById(class="string">'hours').value)||class="number">0;
66 class=class="string">"keyword">var m=parseInt(document.class="func">getElementById(class="string">'minutes').value)||class="number">0;
67 class=class="string">"keyword">var s=parseInt(document.class="func">getElementById(class="string">'seconds').value)||class="number">0;class=class="string">"keyword">return h*class="number">3600+m*class="number">60+s;}
68class=class="string">"keyword">function updateDisplay(){
69 class=class="string">"keyword">var r=remaining;class=class="string">"keyword">var h=Math.floor(r/class="number">3600);r%=class="number">3600;
70 class=class="string">"keyword">var m=Math.floor(r/class="number">60);class=class="string">"keyword">var s=r%class="number">60;
71 class=class="string">"keyword">var d=document.class="func">getElementById(class="string">'display');
72 d.textContent=(h>class="number">0?class="func">String(h).padStart(class="number">2,class="string">'class="number">0')+class="string">':':class="string">'')+class="func">String(m).padStart(class="number">2,class="string">'class="number">0')+class="string">':'+class="func">String(s).padStart(class="number">2,class="string">'class="number">0');
73 d.className=class="string">'display';
74 class=class="string">"keyword">if(remaining>class="number">0&&remaining<=class="number">10)d.className=class="string">'display danger';
75 class=class="string">"keyword">else class=class="string">"keyword">if(remaining>class="number">0&&remaining<=class="number">60)d.className=class="string">'display warning';
76}
77class=class="string">"keyword">function beep(){
78 try{class=class="string">"keyword">var c=class=class="string">"keyword">new(window.AudioContext||webkit.AudioContext)();
79 class=class="string">"keyword">for(class=class="string">"keyword">var i=class="number">0;i<class="number">3;i++){class=class="string">"keyword">var o=c.createOscillator(),g=c.createGain();
80 o.connect(g);g.connect(c.destination);o.frequency.value=class="number">800;
81 g.gain.value=class="number">0.3;o.start(c.currentTime+i*class="number">0.3);
82 g.gain.exponentialRampToValueAtTime(class="number">0.01,c.currentTime+i*class="number">0.3+class="number">0.25);
83 o.stop(c.currentTime+i*class="number">0.3+class="number">0.25);}
84 }class="func">catch(e){}
85}
86class=class="string">"keyword">function toggleTimer(){
87 class=class="string">"keyword">if(isRunning){clearInterval(timer);isRunning=false;
88 document.class="func">getElementById(class="string">'mainBtn').textContent=class="string">'▶ 继续';
89 document.class="func">getElementById(class="string">'mainBtn').className=class="string">'btn btn-start';class=class="string">"keyword">return;}
90 class=class="string">"keyword">if(remaining<=class="number">0){remaining=getInput();totalSecs=remaining;}
91 class=class="string">"keyword">if(remaining<=class="number">0)class=class="string">"keyword">return;
92 isRunning=true;document.class="func">getElementById(class="string">'mainBtn').textContent=class="string">'⏸ 暂停';
93 document.class="func">getElementById(class="string">'mainBtn').className=class="string">'btn btn-pause';
94 timer=class="func">setInterval(class=class="string">"keyword">function(){remaining--;
95 updateDisplay();
96 class=class="string">"keyword">if(remaining<=class="number">0){clearInterval(timer);isRunning=false;
97 document.class="func">getElementById(class="string">'mainBtn').textContent=class="string">'▶ 开始';
98 document.class="func">getElementById(class="string">'mainBtn').className=class="string">'btn btn-start';beep();}},class="number">1000);
99}
100class=class="string">"keyword">function resetTimer(){clearInterval(timer);isRunning=false;remaining=class="number">0;
101 document.class="func">getElementById(class="string">'mainBtn').textContent=class="string">'▶ 开始';
102 document.class="func">getElementById(class="string">'mainBtn').className=class="string">'btn btn-start';updateDisplay();}
103updateDisplay();
104</class="tag">script><class="tag">div style="text-align:center;padding-top:10px;font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">555"><class="tag">a href="source-viewer.php?file=timer.php" style="color:#FF6B35;text-decoration:none;">📖 查看源码</class="tag">a> · 编程小白，AI生成，若体验不佳请多包涵 🙏</class="tag">div>
105</class="tag">body></class="tag">html>
106