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

与妖为邻
已于 2024-08-20 14:53:44 修改
阅读量122
点赞数 7
文章标签： javascript 前端 html 倒计时
于 2024-08-20 14:52:07 首次发布
本文链接：https://blog.csdn.net/lulei5153/article/details/141358511
版权
<!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>