您需要一个显示北京时间并具备倒计时功能的秒表。以下是一个简洁的解决方案，结合了 实时北京时间显示 与 自定义倒计时 功能：
### 功能说明
1. 北京时间显示：实时显示当前北京时间（UTC+8）。
2. 倒计时功能：可设定目标时间（如“2024-12-31 23:59:59”），实时计算剩余时间。
3. 操作控制：支持开始、暂停、重置倒计时。
### 完整代码示例（HTML + JavaScript）
复制以下代码到文本编辑器，保存为 `.html` 文件后用浏览器打开即可使用：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>北京时间倒计时秒表</title>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
text-align: center;
padding: 40px;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: #fff;
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.05);
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
h1 {
margin-bottom: 10px;
color: #0ea5e9;
}
.section {
margin: 30px 0;
padding: 20px;
background: rgba(255, 255, 255, 0.08);
border-radius: 15px;
}
.time-display {
font-size: 3.5em;
font-weight: bold;
margin: 20px 0;
color: #22d3ee;
text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}
.countdown-display {
font-size: 4em;
font-weight: bold;
margin: 20px 0;
color: #fbbf24;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}
.controls {
margin: 20px 0;
}
input, button {
padding: 12px 20px;
margin: 8px;
border: none;
border-radius: 8px;
font-size: 1em;
}
input {
width: 250px;
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid #555;
}
button {
background: #3b82f6;
color: white;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
background: #2563eb;
transform: translateY(-2px);
}
button#resetBtn {
background: #ef4444;
}
button#resetBtn:hover {
background: #dc2626;
}
.status {
margin-top: 15px;
font-size: 1.2em;
color: #a5b4fc;
}
</style>
</head>
<body>
<div class="container">
<h1>⏰ 北京时间倒计时秒表</h1>
<div class="section">
<h2>🕐 当前北京时间（实时）</h2>
<div id="beijingTime" class="time-display">::</div>
</div>
<div class="section">
<h2>⏳ 倒计时器</h2>
<p>设置目标时间（格式：2024-12-31 23:59:59）</p>
<input type="text" id="targetInput" placeholder="2024-12-31 23:59:59">
<div class="controls">
<button id="startBtn">开始倒计时</button>
<button id="pauseBtn">暂停</button>
<button id="resetBtn">重置</button>
</div>
<div id="countdown" class="countdown-display">00:00:00</div>
<div id="status" class="status">等待设置目标时间...</div>
</div>
</div>
<script>
// 1. 实时北京时间显示
function updateBeijingTime() {
const now = new Date();
const beijingTime = new Date(now.getTime() + (8 * 60 * 60 * 1000)); // UTC+8
const timeStr = beijingTime.toISOString().substr(11, 8);
document.getElementById('beijingTime').textContent = timeStr;
}
setInterval(updateBeijingTime, 1000);
updateBeijingTime();
// 2. 倒计时逻辑
let countdownInterval = null;
let targetTime = null;
let isRunning = false;
document.getElementById('startBtn').addEventListener('click', startCountdown);
document.getElementById('pauseBtn').addEventListener('click', pauseCountdown);
document.getElementById('resetBtn').addEventListener('click', resetCountdown);
function startCountdown() {
if (isRunning) return;
const input = document.getElementById('targetInput').value.trim();
if (!input) {
alert("请输入目标时间！");
return;
}
// 解析输入时间（假设为北京时间）
const inputTime = new Date(input);
if (isNaN(inputTime.getTime())) {
alert("时间格式错误！请使用：YYYY-MM-DD HH:MM:SS");
return;
}
targetTime = inputTime;
isRunning = true;
document.getElementById('status').textContent = "倒计时进行中...";
countdownInterval = setInterval(() => {
const now = new Date();
const diff = targetTime now;
if (diff <= 0) {
clearInterval(countdownInterval);
document.getElementById('countdown').textContent = "00:00:00";
document.getElementById('status').textContent = "🎉 时间到！";
isRunning = false;
return;
}
const hours = Math.floor(diff / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
const timeStr = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
document.getElementById('countdown').textContent = timeStr;
}, 1000);
}
function pauseCountdown() {
if (countdownInterval) {
clearInterval(countdownInterval);
countdownInterval = null;
isRunning = false;
document.getElementById('status').textContent = "已暂停";
}
}
function resetCountdown() {
pauseCountdown();
document.getElementById('countdown').textContent = "00:00:00";
document.getElementById('status').textContent = "已重置";
document.getElementById('targetInput').value = "";
}
</script>
</body>
</html>
```
### 使用说明
1. 北京时间显示：顶部实时显示当前北京时间。
2. 设置倒计时：
在输入框中输入目标时间（格式：`YYYY-MM-DD HH:MM:SS`，例如 `2024-12-31 23:59:59`）。
点击 “开始倒计时” 按钮启动。
3. 控制操作：
暂停：临时停止倒计时。
重置：清除当前倒计时并恢复初始状态。
4. 状态提示：底部会显示倒计时状态（进行中、暂停、结束等）。
### 注意事项
时间输入需按格式填写，系统会自动按 北京时间（UTC+8） 处理。
倒计时精度为 1秒，适合一般场景使用。