独特的倒计时容器uniqueCountdownContainer：修改了倒计时更好用好看了

本文链接：https://blog.csdn.net/lulei5153/article/details/141558545
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>独特的倒计时容器uniqueCountdownContainer</title>
</head>
<style></style>
<style>
    body {
        background: #0b1b2c;
    }
    /* 独特的倒计时容器uniqueCountdownContainer 开始 */
    #uniqueCountdownContainer {
        top: 42px;
        right: 0;
        position: fixed;
        display: flex;
        flex-wrap: wrap;
        border-radius: 5px;
        input[type="checkbox"] {
            display: none;
        }
        label {
            &:hover {
                background-color: #e63c3c;
                cursor: pointer;
                strong {
                    color: #ffffff;
                    text-shadow: 2px 2px 2px #000000;
                }
                span {
                    color: #000000;
                    text-shadow: 1px 1px 1px #fffefe;
                    font-size: 1.8rem;
                }
            }
        }
        strong {
            text-shadow: 2px 2px 2px #ffffff;
        }
        span {
            color: #fff;
            text-shadow: 1px 1px 1px #000;
            font-size: 1.8rem;
        }
    }
    /* 添加样式 */
    .uniqueAddButton {
        /* 确保按钮内容可以应用 writing-mode */
        /* display: inline-block; */
        /* 竖排文字，从左到右 */
        writing-mode: vertical-lr;
        /* 文字直立 */
        text-orientation: upright;
        letter-spacing: 15px;
        font-size: 18px;
    }
    /* 添加的弹窗窗口样式 */
    #uniqueAddCountdownDialog {
        transform: translate(100%, 0%);
        border-radius: 5px;
        color: #67c23a;
        text-shadow: 1px 1px 1px #000;
        background: rgba(255, 255, 255, 0.2);
        /* 半透明背景 */
        backdrop-filter: blur(10px);
        /* 模糊效果 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        /* 阴影效果 */
        border: none;
        div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            ul {
                list-style: none;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                b {
                    color: #000000;
                    text-shadow: 1px 1px 1px #f2f1f1;
                }
            }
        }
    }
    /* 独特的倒计时容器uniqueCountdownContainer 结束 */
</style>
<body>
    <div id="uniqueCountdownContainer">独特的倒计时容器uniqueCountdownContainer</div>
    <b style="color: #ffffff;text-shadow: 1px 1px 1px #000000;">修复每次修改倒计时后，再点击选中复选框就多了一个复选框问题：
        1.在编辑倒计时后，删除旧的复选框。
        2.添加新的复选框并更新倒计时。
    </b>
</body>
<script>
    /* 独特的倒计时容器uniqueCountdownContainer 开始 */
    /* 原神元素颜色数据*/
    const elementColors = {
        "火": "#FF9933",
        "水": "#3399FF",
        "风": "#66c6ac",
        "雷": "#CC66FF",
        "草": "#66CC66",
        "冰": "#99CCFF",
        "岩": "#FFCC33"
    };
    document.getElementById('uniqueCountdownContainer').innerHTML = `
    <div id="uniqueCountdowns">
        <!--动态倒计时区 -->
    </div>
    <!-- 按钮区 -->        
    <button class="uniqueAddButton" onclick="showAddCountdownDialog()" style="color: #67c23a;" class="uniqueAddCountdownButton">添加</button>
    <button class="uniqueEditButton " onclick="editSelectedCountdown()" style="display: none;color: #e6a23c;">改</button>
    <button class="uniqueDeleteButton " onclick="deleteSelectedCountdown()" style="display: none;color: red;">删</button>          
    <dialog id="uniqueAddCountdownDialog">
        <div>
            <form>
                <button id="uniqueCancelAdd" type="submit">取消添加</button>
                <br>
                <input type="text" id="uniquePromptInput" placeholder="提示信息">
                <br>
                <input type="datetime-local" id="uniqueDatetimeInput">
                <button id="uniqueSaveButton" onclick="saveCountdown()">保存</button>
            </form>         
            <ul>
               <b>主要节日时间表</b>
                <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>
        </div>
    </dialog>
`;
    /**
     * 显示添加倒计时对话框
     *
     * @returns 无返回值
     */
    function showAddCountdownDialog() {
        document.getElementById('uniqueAddCountdownDialog').showModal();
    }
    /**
     * 保存倒计时信息
     *
     * @returns 无返回值
     */
    function saveCountdown() {
        const promptInput = document.getElementById('uniquePromptInput').value.trim();
        const datetimeInput = document.getElementById('uniqueDatetimeInput').value;
        if (promptInput && datetimeInput) {
            // 将用户输入的日期时间格式转换为202408111731格式
            const formattedDatetime = datetimeInput.replace(/-/g, '').replace(/T/g, '').replace(/:/g, '');
            const countdownDiv = document.getElementById('uniqueCountdowns');
            const timestamp = Date.now();
            const checkboxId = `uniqueCheckbox_${timestamp}`; // 生成唯一的 checkbox id
            const countdownElement = document.createElement('div');
            countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
            countdownElement.style.backdropFilter = 'blur(10px)'; // 毛玻璃效果
            countdownElement.innerHTML = `<input type="checkbox" class="uniqueCountdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${promptInput}</strong>:<span id="uniqueCountdown_${timestamp}"></span></label>`;
            countdownDiv.appendChild(countdownElement);
            updateCountdown(`uniqueCountdown_${timestamp}`, new Date(datetimeInput.slice(0, 4), datetimeInput.slice(4, 6) - 1, datetimeInput.slice(6, 8), datetimeInput.slice(8, 10), datetimeInput.slice(10, 12)));
            // 存储倒计时信息到 localStorage
            localStorage.setItem(`uniqueCountdown_${timestamp}`, JSON.stringify({
                prompt: promptInput,
                datetime: formattedDatetime
            }));
        } else {
            alert('请填写提示信息和目标日期');
        }
    }
    let colorIndex = 0; // 初始化颜色索引
    /**
     * 获取随机颜色
     *
     * @returns 返回原神元素对应的颜色
     */
    function getRandomColor() {
        const elements = Object.keys(elementColors); // 获取所有元素名称（原神元素颜色数据)
        colorIndex = (colorIndex + 1) % elements.length; // 递增索引，并在达到数组长度时重置为0
        return elementColors[elements[colorIndex]]; // 返回该元素对应的颜色
    }
    // 页面加载时从 localStorage 中恢复倒计时
    window.onload = function () {
        const countdowns = [];
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            if (key.startsWith('uniqueCountdown_')) {
                const data = JSON.parse(localStorage.getItem(key));
                const timestamp = key.split('_')[1];
                countdowns.push({ timestamp, data });
            }
        }
        countdowns.sort((a, b) => a.timestamp - b.timestamp); // 按时间戳排序
        countdowns.forEach(({ timestamp, data }, index) => {
            const countdownDiv = document.getElementById('uniqueCountdowns');
            const checkboxId = `uniqueCheckbox_${timestamp}`; // 生成唯一的 checkbox id
            const countdownElement = document.createElement('div');
            countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
            countdownElement.style.backdropFilter = 'blur(10px)'; // 毛玻璃效果
            if (index === 0) {
                countdownElement.style.borderTopLeftRadius = '5px';
                countdownElement.style.borderTopRightRadius = '5px';
            }
            if (index === countdowns.length - 1) {
                countdownElement.style.borderBottomLeftRadius = '5px';
                countdownElement.style.borderBottomRightRadius = '5px';
            }
            countdownElement.innerHTML = `<input type="checkbox" class="uniqueCountdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${data.prompt}</strong>:<span id="uniqueCountdown_${timestamp}"></span></label>`;
            countdownDiv.appendChild(countdownElement);
            updateCountdown(`uniqueCountdown_${timestamp}`, new Date(data.datetime.slice(0, 4), data.datetime.slice(4, 6) - 1, data.datetime.slice(6, 8), data.datetime.slice(8, 10), data.datetime.slice(10, 12)));
        });
    };
    /**
     * 更新倒计时
     *
     * @param elementId 倒计时元素ID
     * @param targetDate 目标日期
     */
    function updateCountdown(elementId, targetDate) {
        const countdownElement = document.getElementById(elementId);
        function update() {
            const now = new Date();
            const total = targetDate - now;
            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)}`;
            countdownElement.textContent = total <= 0 ? `已过去${timeStr}` : timeStr;
        }
        function padZero(num) {
            return num < 10 ? `0${num}` : num;
        }
        update();
        setInterval(update, 1000);
    }
  /**
 * 编辑已选中的倒计时
 *
 * @returns 无返回值
 */
function editSelectedCountdown() {
    const checkboxes = document.querySelectorAll('.uniqueCountdownCheckbox:checked');
    if (checkboxes.length === 0) return;
    checkboxes.forEach(checkbox => {
        const timestamp = checkbox.value;
        const data = JSON.parse(localStorage.getItem(`uniqueCountdown_${timestamp}`));
        if (data) { // 检查数据是否存在
            const newPrompt = prompt('请输入新的提示信息', data.prompt);
            const newDatetime = prompt('目标日期(YYYYMMDDHHMM,例如:202410010400)', data.datetime);
            if (newPrompt && newDatetime) {
                // 删除旧的复选框
                checkbox.parentNode.remove();
                // 添加新的复选框并更新倒计时
                localStorage.setItem(`uniqueCountdown_${timestamp}`, JSON.stringify({
                    prompt: newPrompt,
                    datetime: newDatetime
                }));
                const countdownDiv = document.getElementById('uniqueCountdowns');
                const checkboxId = `uniqueCheckbox_${timestamp}`; // 生成唯一的 checkbox id
                const countdownElement = document.createElement('div');
                countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
                countdownElement.style.backdropFilter = 'blur(10px)'; // 毛玻璃效果
                countdownElement.innerHTML = `<input type="checkbox" class="uniqueCountdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${newPrompt}</strong>: <span id="uniqueCountdown_${timestamp}"></span></label>`;
                countdownDiv.appendChild(countdownElement);
                updateCountdown(`uniqueCountdown_${timestamp}`, new Date(newDatetime.slice(0, 4), newDatetime.slice(4, 6) - 1, newDatetime.slice(6, 8), newDatetime.slice(8, 10), newDatetime.slice(10, 12)));
            }
        } else {
            console.error(`Countdown data for timestamp ${timestamp} not found in localStorage.`);
        }
    });
    // 重置复选框状态
    checkboxes.forEach(checkbox => {
        checkbox.checked = false;
    });
    // 手动触发change事件以恢复最初状态
    document.dispatchEvent(new Event('change'));
}
    /**
     * 删除选中的倒计时
     *
     * @returns 无返回值
     */
    function deleteSelectedCountdown() {
        const confirmDelete = confirm("确定要删除选中的倒计时吗？");
        if (confirmDelete) {
            const checkboxes = document.querySelectorAll('.uniqueCountdownCheckbox:checked');
            checkboxes.forEach(checkbox => {
                const timestamp = checkbox.value;
                localStorage.removeItem(`uniqueCountdown_${timestamp}`);
                checkbox.parentNode.remove();
            });
            // 重置所有复选框状态
            document.querySelectorAll('.uniqueCountdownCheckbox').forEach(checkbox => {
                checkbox.checked = false;
            });
            // 隐藏编辑和删除按钮，显示添加按钮
            document.querySelector('.uniqueEditButton').style.display = 'none';
            document.querySelector('.uniqueDeleteButton').style.display = 'none';
            document.querySelector('.uniqueAddButton').style.display = 'inline-block';
            // 手动触发change事件以恢复最初状态
            document.dispatchEvent(new Event('change'));
        }
    }
    // 监听复选框状态变化
    document.addEventListener('change', function (event) {
        const editButton = document.querySelector('.uniqueEditButton');
        const deleteButton = document.querySelector('.uniqueDeleteButton');
        const addCountdownButton = document.querySelector('.uniqueAddButton');
        const checkedCheckboxes = document.querySelectorAll('.uniqueCountdownCheckbox:checked');
        // 简化条件判断和样式设置
        const isChecked = checkedCheckboxes.length > 0;
        editButton.style.display = isChecked ? 'inline-block' : 'none';
        deleteButton.style.display = isChecked ? 'inline-block' : 'none';
        addCountdownButton.style.display = isChecked ? 'none' : 'inline-block';
        // 获取#uniqueCountdownContainer元素
        const countdownContainer = document.querySelector('#uniqueCountdownContainer');
        if (isChecked) {
            // 修改样式
            countdownContainer.style.backgroundColor = '#e63c3c';
            countdownContainer.querySelectorAll('label').forEach(label => {
                label.style.backgroundColor = '#e63c3c';
            });
            countdownContainer.querySelectorAll('strong').forEach(strong => {
                strong.style.color = '#ffffff';
                strong.style.textShadow = '2px 2px 2px #000000';
            });
            countdownContainer.querySelectorAll('span').forEach(span => {
                span.style.color = '#000000';
                span.style.textShadow = '1px 1px 1px #fffefe';
            });
            countdownContainer.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                checkbox.style.display = 'inline-block';
            });
        } else {
            // 恢复默认样式（如果需要）
            countdownContainer.style.backgroundColor = '';
            countdownContainer.querySelectorAll('label').forEach(label => {
                label.style.backgroundColor = '';
            });
            countdownContainer.querySelectorAll('strong').forEach(strong => {
                strong.style.color = '';
                strong.style.textShadow = '';
            });
            countdownContainer.querySelectorAll('span').forEach(span => {
                span.style.color = '';
                span.style.textShadow = '';
            });
            countdownContainer.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                checkbox.style.display = '';
            });
        }
    });
    /* 独特的倒计时容器uniqueCountdownContainer 结束 */
</script>
</html>