ADD file via upload

5 days ago · 38af0d8474
parent 1b9f54caab
commit 38af0d8474
1 changed files with 138 additions and 0 deletions
--- a/timer.html
+++ b/timer.html
@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>倒计时页面</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body, html {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: Arial, sans-serif;
+            background-color: #f5f5f5;
+        }
+        .container {
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background-color: #fff;
+            transform-origin: center;
+            padding: 20px;
+            transform: scale(1);
+        }
+        .countdown-text {
+            font-size: 16px;
+            color: #666;
+            margin-bottom: 10px;
+        }
+        .countdown-time {
+            font-size: 32px;
+            font-weight: bold;
+            margin: 20px 0;
+        }
+        .button-group {
+            display: flex;
+            gap: 20px;
+        }
+        .button {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            border: 2px solid #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            font-size: 24px;
+            color: #000;
+            background-color: transparent;
+        }
+        /* 去掉点击或聚焦时的默认蓝色高亮 */
+        .button:focus {
+            outline: none;
+        }
+        .button:active {
+            background-color: transparent;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="countdown-text">您已经锻炼了：</div>
+    <div class="countdown-time" id="countdown">00小时00分00秒</div>
+    <div class="button-group">
+        <div class="button" id="playButton">▶</div>
+        <div class="button" id="endButton">⏹</div>
+    </div>
+</div>
+
+<script>
+    let countdownTime = 0; // 从零开始计时
+    let countdownInterval = null;
+    let isCounting = false; // 用于跟踪倒计时是否在进行中
+
+    // 将秒数转换为"XX小时XX分XX秒"格式
+    function formatTime(seconds) {
+        const hrs = Math.floor(seconds / 3600);
+        const mins = Math.floor((seconds % 3600) / 60);
+        const secs = seconds % 60;
+        return `${String(hrs).padStart(2, '0')}小时${String(mins).padStart(2, '0')}分${String(secs).padStart(2, '0')}秒`;
+    }
+
+    // 更新倒计时显示
+    function updateCountdown() {
+        document.getElementById("countdown").textContent = formatTime(countdownTime);
+    }
+
+    // 启动或暂停倒计时
+    function toggleCountdown() {
+        const playButton = document.getElementById("playButton");
+
+        if (isCounting) {
+            clearInterval(countdownInterval);
+            playButton.textContent = "▶"; // 切换回播放按钮
+            isCounting = false;
+        } else {
+            countdownInterval = setInterval(() => {
+                countdownTime++;
+                updateCountdown();
+            }, 1000);
+            playButton.textContent = "⏸"; // 切换为暂停按钮
+            isCounting = true;
+        }
+    }
+
+    // 结束倒计时
+    function endCountdown() {
+        if (confirm("确定要结束倒计时吗？")) {
+            clearInterval(countdownInterval);
+            countdownTime = 0;
+            updateCountdown();
+            isCounting = false;
+            document.getElementById("playButton").textContent = "▶"; // 重置播放按钮
+            alert("倒计时已结束！");
+        }
+    }
+
+    // 绑定播放/暂停按钮点击事件
+    document.getElementById("playButton").addEventListener("click", toggleCountdown);
+
+    // 绑定结束按钮点击事件
+    document.getElementById("endButton").addEventListener("click", endCountdown);
+
+    // 页面加载时初始化倒计时
+    updateCountdown();
+</script>
+</body>
+</html>