本文主要是介绍重新修改倒计时，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!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));// 存储倒计时信息到 localStoragelocalStorage.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>
这篇关于重新修改倒计时的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
