当前位置：首页 > news >正文

倒计时：隐藏删除按钮，点击添加按钮最多显示删除按钮10秒自动隐藏

news 来源：原创 2024/9/20 17:19:53

<!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>