重新修改倒计时

最新推荐文章于 2024-09-30 18:55:14 发布
与妖为邻
最新推荐文章于 2024-09-30 18:55:14 发布
阅读量179
点赞数 3
文章标签： javascript localStorage html css3 添加倒计时
本文链接：https://blog.csdn.net/lulei5153/article/details/141400705
版权
<!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>
    </style>
</head>

<body>
    <div id="countdownContainer"></div>
    <script>
        // 创建倒计时容器的HTML内容
        const countdownContainer = document.getElementById('countdownContainer');
        countdownContainer.innerHTML = `
            <div id="countdowns">
                <!--动态倒计时区 -->
            </div>
            <!-- 用户区编辑区 -->
            <button onclick="addCountdown.show()">添加</button>
            <dialog id="addCountdown">
                <form>
                    <button id="cancelAdd" type="submit">取消添加</button>
                    <br>
                    <input type="text" id="promptInput" placeholder="提示信息">
                    <br>
                    <input type="datetime-local" id="datetimeInput">
                    <button id="saveButton" onclick="saveCountdown()">保存</button>
                </form>
            <p>主要节日时间表</p>
    <ul>
        <li>星尘兑换纠缠之缘重置时间:2024年09月01日04点00分</li>
        <li>幻想真境剧诗重置时间:2024年09月01日04点00分</li>
        <li>渊月螺旋重置时间:2024年09月16日04点00分</li>
        <li>4.8版本下半场限时祈愿结束:2024年08月27日15点00分</li>
        <li>元旦:2025年1月1日</li>
        <li>春节:2025年2月12日</li>
        <li>清明节:2025年4月4日</li>
        <li>劳动节:2025年5月1日</li>
        <li>端午节:2025年6月2日</li>
        <li>中秋节:2025年9月21日</li>
        <li>国庆节:2025年10月1日</li>     
    </ul>
            </dialog>
            <button class="edit" onclick="editSelected.show()" style="display: none;">修改选中</button>
            <button class="delete" onclick="deleteSelected()" style="display: none;">删除选中</button>
        `;
        function saveCountdown() {
            const promptInput = document.getElementById('promptInput').value.trim();
            const datetimeInput = document.getElementById('datetimeInput').value;
            if (promptInput && datetimeInput) {
                const countdownDiv = document.getElementById('countdowns');
                const timestamp = Date.now();
                const countdownElement = document.createElement('div');
                countdownElement.innerHTML = `<strong>${promptInput}</strong>: <span id="countdown_${timestamp}"></span><input type="checkbox" class="countdownCheckbox" value="${timestamp}">`;
                countdownDiv.appendChild(countdownElement);
                updateCountdown(`countdown_${timestamp}`, new Date(datetimeInput));
                // 存储倒计时信息到 localStorage
                localStorage.setItem(`countdown_${timestamp}`, JSON.stringify({
                    prompt: promptInput,
                    datetime: datetimeInput
                }));
            } else {
                alert('请填写提示信息和目标日期');
            }
        }
        function updateCountdown(elementId, targetDate) {
            const countdownElement = document.getElementById(elementId);
            function update() {
                // 计算剩余时间
                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;
                }
                // 更新倒计时显示
                countdownElement.textContent = getTimeRemaining(targetDate);
            }
            update();
            setInterval(update, 1000);
        }
        // 页面加载时从 localStorage 中恢复倒计时
        window.onload = function () {
            for (let i = 0; i < localStorage.length; i++) {
                const key = localStorage.key(i);
                if (key.startsWith('countdown_')) {
                    const data = JSON.parse(localStorage.getItem(key));
                    const timestamp = key.split('_')[1];
                    const countdownDiv = document.getElementById('countdowns');
                    const countdownElement = document.createElement('div');
                    countdownElement.innerHTML = `<strong>${data.prompt}</strong>: <span id="countdown_${timestamp}"></span><input type="checkbox" class="countdownCheckbox" value="${timestamp}">`;
                    countdownDiv.appendChild(countdownElement);
                    updateCountdown(`countdown_${timestamp}`, new Date(data.datetime));
                }
            }
        };
        // 监听复选框状态变化
        document.addEventListener('change', function (event) {
            const checkboxes = document.querySelectorAll('.countdownCheckbox:checked');
            const editButton = document.querySelector('.edit');
            const deleteButton = document.querySelector('.delete');
            if (checkboxes.length > 0) {
                editButton.style.display = 'inline-block';
                deleteButton.style.display = 'inline-block';
            } else {
                editButton.style.display = 'none';
                deleteButton.style.display = 'none';
            }
        });
        // 删除选中的倒计时
        document.querySelector('.delete').addEventListener('click', function () {
            // 弹出确认对话框
            const confirmDelete = confirm("确定要删除选中的倒计时吗？");
            if (confirmDelete) {
                const checkboxes = document.querySelectorAll('.countdownCheckbox:checked');
                checkboxes.forEach(checkbox => {
                    const timestamp = checkbox.value;
                    localStorage.removeItem(`countdown_${timestamp}`);
                    checkbox.parentNode.remove();
                });
                // 清空所有复选框的选中状态，并隐藏编辑和删除按钮
                document.querySelectorAll('.countdownCheckbox').forEach(checkbox => {
                    checkbox.checked = false;
                });
                document.querySelector('.edit').style.display = 'none';
                document.querySelector('.delete').style.display = 'none';
            }
            // 如果用户选择取消，则不执行任何操作
        });
        // 编辑选中的倒计时
        document.querySelector('.edit').addEventListener('click', function () {
            const checkboxes = document.querySelectorAll('.countdownCheckbox:checked');
            if (checkboxes.length === 0) return; // 如果没有选中的复选框，直接返回
            checkboxes.forEach(checkbox => {
                const timestamp = checkbox.value;
                const data = JSON.parse(localStorage.getItem(`countdown_${timestamp}`));
                // 弹出对话框或表单，让用户修改提示信息和目标日期
                const newPrompt = prompt('请输入新的提示信息', data.prompt);
                const newDatetime = prompt('请输入新的目标日期(格式:YYYY-MM-DD HH:MM,例如:2023-10-05 04:00)', data.datetime.replace('T', ' '));
                if (newPrompt && newDatetime) {
                    // 更新 localStorage 中的数据
                    localStorage.setItem(`countdown_${timestamp}`, JSON.stringify({
                        prompt: newPrompt,
                        datetime: newDatetime
                    }));
                    // 更新页面上的显示
                    const countdownElement = document.getElementById(`countdown_${timestamp}`).parentNode;
                    countdownElement.innerHTML = `<strong>${newPrompt}</strong>: <span id="countdown_${timestamp}"></span><input type="checkbox" class="countdownCheckbox" value="${timestamp}">`;
                    updateCountdown(`countdown_${timestamp}`, new Date(newDatetime));
                }
            });
            // 清空所有复选框的选中状态，并隐藏编辑和删除按钮
            document.querySelectorAll('.countdownCheckbox').forEach(checkbox => {
                checkbox.checked = false;
            });
            document.querySelector('.edit').style.display = 'none';
            document.querySelector('.delete').style.display = 'none';
        });
    </script>
</body>

</html>