重新修改倒计时

2024-08-21 20:52
文章标签 倒计时 修改 重新

本文主要是介绍重新修改倒计时，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 

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

 

这篇关于重新修改倒计时的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1094257。

相关文章

python修改字符串值的三种方法

python修改字符串值的三种方法

《python修改字符串值的三种方法》本文主要介绍了python修改字符串值的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录第一种方法：第二种方法：第三种方法：在python中，字符串对象是不可变类型，所以我们没办法直接
阅读更多...
Mysql8.0修改配置文件my.ini的坑及解决

Mysql8.0修改配置文件my.ini的坑及解决

《Mysql8.0修改配置文件my.ini的坑及解决》使用记事本直接编辑my.ini文件保存后,可能会导致MySQL无法启动,因为MySQL会以ANSI编码读取该文件,解决方法是使用Notepad++... 目录Myhttp://www.chinasem.cnsql8.0修改配置文件my.ini的坑出现的问题
阅读更多...
两个月冲刺软考——访问位与修改位的题型(淘汰哪一页)；内聚的类型；关于码制的知识点；地址映射的相关内容

两个月冲刺软考——访问位与修改位的题型(淘汰哪一页)；内聚的类型；关于码制的知识点；地址映射的相关内容

1.访问位与修改位的题型(淘汰哪一页) 访问位：为1时表示在内存期间被访问过，为0时表示未被访问；修改位：为1时表示该页面自从被装入内存后被修改过，为0时表示未修改过。 置换页面时，最先置换访问位和修改位为00的，其次是01(没被访问但被修改过)的，之后是10(被访问了但没被修改过)，最后是11。 2.内聚的类型 功能内聚：完成一个单一功能，各个部分协同工作，缺一不可。 顺序内聚：
阅读更多...
如何在运行时修改serialVersionUID

如何在运行时修改serialVersionUID

优质博文：IT-BLOG-CN 问题 我正在使用第三方库连接到外部系统，一切运行正常，但突然出现序列化错误 java.io.InvalidClassException: com.essbase.api.base.EssException; local class incompatible: stream classdesc serialVersionUID = 90314637791991
阅读更多...
android系统源码12 修改默认桌面壁纸--SRO方式

android系统源码12 修改默认桌面壁纸--SRO方式

1、aosp12修改默认桌面壁纸 代码路径 ：frameworks\base\core\res\res\drawable-nodpi 替换成自己的图片即可，不过需要覆盖所有目录下的图片。 由于是静态修改，则需要make一下，重新编译。 2、方法二Overlay方式 由于上述方法有很大缺点，修改多了之后容易遗忘自己修改哪些文件，为此我们采用另外一种方法，使用Overlay方式。
阅读更多...
hibernate修改数据库已有的对象【简化操作】

hibernate修改数据库已有的对象【简化操作】

陈科肇 直接上代码： /*** 更新新的数据并并未修改旧的数据* @param oldEntity 数据库存在的实体* @param newEntity 更改后的实体* @throws IllegalAccessException * @throws IllegalArgumentException */public void updateNew(T oldEntity,T newEntity
阅读更多...
2024年AMC10美国数学竞赛倒计时两个月：吃透1250道真题和知识点（持续）

2024年AMC10美国数学竞赛倒计时两个月：吃透1250道真题和知识点（持续）

根据通知，2024年AMC10美国数学竞赛的报名还有两周，正式比赛还有两个月就要开始了。计划参赛的孩子们要记好时间，认真备考，最后冲刺再提高成绩。 那么如何备考2024年AMC10美国数学竞赛呢？做真题，吃透真题和背后的知识点是备考AMC8、AMC10有效的方法之一。通过做真题，可以帮助孩子找到真实竞赛的感觉，而且更加贴近比赛的内容，可以通过真题查漏补缺，更有针对性的补齐知识的短板。
阅读更多...
SW - 引入第三方dwg图纸后，修改坐标原点

SW - 引入第三方dwg图纸后，修改坐标原点

文章目录 SW - 引入第三方dwg图纸后，修改坐标原点概述笔记设置图纸新原点END SW - 引入第三方dwg图纸后，修改坐标原点 概述 在solidworks中引入第三方的dwg格式图纸后，坐标原点大概率都不合适。 全图自动缩放后，引入的图纸离默认的原点位置差很多。 需要自己重新设置原点位置，才能自动缩放后，在工作区中间显示引入的图纸。 笔记 将dwg图纸拖到SW中
阅读更多...
linux下修改系统日期与时间

linux下修改系统日期与时间

cp /usr/share/zoneinfo/Asia/Shanghai  /etc/localtime
阅读更多...
用Python编写倒计时程序：详细教程

用Python编写倒计时程序：详细教程

目录 引言 环境准备 基本概念 代码实现 步骤一：导入必要的库 步骤二：获取用户输入 步骤三：实现倒计时逻辑 步骤四：整合代码 运行程序 高级功能 扩展功能示例：支持分钟和小时输入 扩展功能示例：图形用户界面 (GUI) 总结 引言 倒计时程序是一个非常常见的小工具，广泛用于各种应用场景中，例如考试时间提醒、烹饪计时器、会议倒计时等。Python 作为一种
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2