<!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>
.deleteButtonCountdownContainer {
display: none;
color: red;
}
</style>
</head>
<body>
<!-- 倒计时集合区-->
<div id="countdownContainer"></div>
<!-- 添加倒计时表单 -->
<div id="addCountdownDisplay"></div>
</body>
<script>
/* 添加倒计时 开始*/
var isPaused = false;
var addButtonClicked = false;
var pauseInterval = null;
// 初始化倒计时
function initCountdown() {
initUI();
updateCountdowns();
setInterval(updateCountdowns, 1000);
}
// 初始化用户界面
function initUI() {
var body = getElement("addCountdownDisplay");
body.innerHTML += `<button id="addButton">添加</button> <button id="cancelButton" style="display: none;" onclick="handleCancelOrResume()">取消 倒计时: 10秒恢复运行</button>`;
body.innerHTML += `<div id="countdownForm" style="display: none;"><input type="text" id="countdownTitle" placeholder="提示信息"><input type="datetime-local" id="countdownDate"><button onclick="saveCountdown()">保存</button></div>`;
body.innerHTML += `<div id="countdownDisplay" style="display: none;"></div>`;
getElement('addButton').onclick = function () {
if (!addButtonClicked) {
addButtonClicked = true;
addCountdown();
getElement('cancelButton').style.display = 'inline'; // 显示取消按钮
getElement('addButton').style.display = 'none'; // 隐藏添加按钮
}
};
}
// 更新倒计时显示
function updateCountdowns() {
if (isPaused) return;
var container = getElement("countdownContainer");
container.innerHTML = "";
var countdowns = getCountdowns();
countdowns.forEach(function (countdown, index) {
var div = document.createElement("div");
div.innerHTML = `<strong>${countdown.title}</strong>: ${getTimeRemaining(countdown.date)} <button onclick="confirmDelete(${index})" class="deleteButtonCountdownContainer">删除</button>`;
container.appendChild(div);
});
}
// 计算剩余时间
function getTimeRemaining(endDate) {
const total = Date.parse(endDate) - Date.parse(new Date());
const absTotal = Math.abs(total);
const seconds = Math.floor((absTotal / 1000) % 60);
const minutes = Math.floor((absTotal / 1000 / 60) % 60);
const hours = Math.floor((absTotal / (1000 * 60 * 60)) % 24);
const days = Math.floor(absTotal / (1000 * 60 * 60 * 24));
const timeStr = `${days}天 ${padZero(hours)}小时 ${padZero(minutes)}分钟 ${padZero(seconds)}秒`;
return total <= 0 ? `已过去${timeStr}` : timeStr;
}
// 补零
function padZero(num) {
return num < 10 ? `0${num}` : num;
}
// 添加倒计时
function addCountdown() {
getElement("countdownForm").style.display = "block";
pauseCountdowns(10000);
}
// 暂停倒计时
function pauseCountdowns(duration) {
isPaused = true;
showDeleteButtons();
var timeLeft = 10;
pauseInterval = setInterval(function () {
timeLeft--;
getElement('cancelButton').innerHTML = `取消 倒计时: ${padZero(timeLeft)}秒恢复运行`;
if (timeLeft <= 0) {
clearInterval(pauseInterval);
getElement('countdownDisplay').style.display = "none";
isPaused = false;
hideDeleteButtons();
getElement('cancelButton').innerHTML = `取消 倒计时:已恢复运行`;
}
}, 1000);
}
// 显示删除按钮
function showDeleteButtons() {
var deleteButtons = document.querySelectorAll('.deleteButtonCountdownContainer');
deleteButtons.forEach(function (button) {
button.style.display = 'inline';
});
}
// 隐藏删除按钮
function hideDeleteButtons() {
var deleteButtons = document.querySelectorAll('.deleteButtonCountdownContainer');
deleteButtons.forEach(function (button) {
button.style.display = 'none';
});
}
// 保存倒计时
function saveCountdown() {
var title = getElement("countdownTitle").value;
var date = getElement("countdownDate").value;
if (title && date) {
var countdowns = getCountdowns();
countdowns.push({ title: title, date: date });
localStorage.setItem("countdowns", JSON.stringify(countdowns));
getElement("countdownForm").style.display = "none";
updateCountdowns();
addButtonClicked = false;
resumeCountdowns();
getElement('cancelButton').style.display = 'none'; // 隐藏取消按钮
getElement('addButton').style.display = 'inline'; // 显示添加倒计时按钮
} else {
alert("请填写完整的倒计时信息");
}
}
// 取消倒计时
function cancelCountdown() {
getElement("countdownForm").style.display = "none";
addButtonClicked = false;
resumeCountdowns();
getElement('cancelButton').style.display = 'none'; // 隐藏取消按钮
getElement('addButton').style.display = 'inline'; // 显示添加倒计时按钮
}
// 确认删除倒计时
function confirmDelete(index) {
if (confirm("确定要删除这个倒计时吗？")) {
deleteCountdown(index);
resumeCountdowns();
}
}
// 删除倒计时
function deleteCountdown(index) {
var countdowns = getCountdowns();
countdowns.splice(index, 1);
localStorage.setItem("countdowns", JSON.stringify(countdowns));
updateCountdowns();
getElement('cancelButton').style.display = 'none'; // 隐藏取消按钮
getElement('addButton').style.display = 'inline'; // 显示添加倒计时按钮
getElement("countdownForm").style.display = "none"; // 隐藏倒计时表单
addButtonClicked = false;
}
// 获取所有倒计时
function getCountdowns() {
return JSON.parse(localStorage.getItem("countdowns")) || [];
}
// 恢复倒计时
function resumeCountdowns() {
isPaused = false;
hideDeleteButtons();
var countdownDisplay = getElement("countdownDisplay");
if (countdownDisplay) {
countdownDisplay.style.display = "none";
}
clearInterval(pauseInterval);
}
// 处理取消或恢复
function handleCancelOrResume() {
if (addButtonClicked) {
cancelCountdown();
} else {
resumeCountdowns();
}
}
// 获取元素
function getElement(id) {
return document.getElementById(id);
}
window.onload = initCountdown;
/* 添加倒计时 结束*/
</script>
</html>