parent
1b9f54caab
commit
38af0d8474
@ -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>
|
||||||
Loading…
Reference in new issue