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

2024-08-26 19:12
文章标签 倒计时 容器 修改 更好 好看 独特 uniquecountdowncontainer

本文主要是介绍独特的倒计时容器uniqueCountdownContainer：修改了倒计时更好用好看了，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 

<!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 idconst 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)));// 存储倒计时信息到 localStoragelocalStorage.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; // 递增索引，并在达到数组长度时重置为0return 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 idconst 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 idconst 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>

 

这篇关于独特的倒计时容器uniqueCountdownContainer：修改了倒计时更好用好看了的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


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

相关文章

如何高效移除C++关联容器中的元素

如何高效移除C++关联容器中的元素

《如何高效移除C++关联容器中的元素》关联容器和顺序容器有着很大不同,关联容器中的元素是按照关键字来保存和访问的,而顺序容器中的元素是按它们在容器中的位置来顺序保存和访问的,本文介绍了如何高效移除C+... 目录一、简介二、移除给定位置的元素三、移除与特定键值等价的元素四、移除满足特android定条件的元
阅读更多...
Docker镜像修改hosts及dockerfile修改hosts文件的实现方式

Docker镜像修改hosts及dockerfile修改hosts文件的实现方式

《Docker镜像修改hosts及dockerfile修改hosts文件的实现方式》：本文主要介绍Docker镜像修改hosts及dockerfile修改hosts文件的实现方式,具有很好的参考价... 目录docker镜像修改hosts及dockerfile修改hosts文件准备 dockerfile 文
阅读更多...
Python实现无痛修改第三方库源码的方法详解

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很
阅读更多...
如何将Tomcat容器替换为Jetty容器

如何将Tomcat容器替换为Jetty容器

《如何将Tomcat容器替换为Jetty容器》：本文主要介绍如何将Tomcat容器替换为Jetty容器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Tomcat容器替换为Jetty容器修改Maven依赖配置文件调整（可选）重新构建和运行总结Tomcat容器替
阅读更多...
Linux修改pip和conda缓存路径的几种方法

Linux修改pip和conda缓存路径的几种方法

《Linux修改pip和conda缓存路径的几种方法》在Python生态中,pip和conda是两种常见的软件包管理工具,它们在安装、更新和卸载软件包时都会使用缓存来提高效率,适当地修改它们的缓存路径... 目录一、pip 和 conda 的缓存机制1. pip 的缓存机制默认缓存路径2. conda 的缓
阅读更多...
C++从序列容器中删除元素的四种方法

C++从序列容器中删除元素的四种方法

《C++从序列容器中删除元素的四种方法》删除元素的方法在序列容器和关联容器之间是非常不同的,在序列容器中,vector和string是最常用的,但这里也会介绍deque和list以供全面了解,尽管在一... 目录一、简介二、移除给定位置的元素三、移除与某个值相等的元素3.1、序列容器vector、deque
阅读更多...
C++常见容器获取头元素的方法大全

C++常见容器获取头元素的方法大全

《C++常见容器获取头元素的方法大全》在C++编程中,容器是存储和管理数据集合的重要工具,不同的容器提供了不同的接口来访问和操作其中的元素,获取容器的头元素（即第一个元素）是常见的操作之一,本文将详细... 目录一、std::vector二、std::list三、std::deque四、std::forwa
阅读更多...
Linux修改pip临时目录方法的详解

Linux修改pip临时目录方法的详解

《Linux修改pip临时目录方法的详解》在Linux系统中,pip在安装Python包时会使用临时目录（TMPDIR）,但默认的临时目录可能会受到存储空间不足或权限问题的影响,所以本文将详细介绍如何... 目录引言一、为什么要修改 pip 的临时目录？1. 解决存储空间不足的问题2. 解决权限问题3. 提
阅读更多...
基于Python和Tkinter实现高考倒计时功能

基于Python和Tkinter实现高考倒计时功能

《基于Python和Tkinter实现高考倒计时功能》随着高考的临近,每个考生都在紧锣密鼓地复习,这时候,一款实用的倒计时软件能有效帮助你规划剩余时间,提醒你不要浪费每一分每一秒,今天,我们来聊聊一款... 目录一、软件概述：二、功能亮点：1. 高考倒计时2. 添加目标倒计时3. 励志语句4. 透明度调节与
阅读更多...
Linux文件名修改方法大全

Linux文件名修改方法大全

《Linux文件名修改方法大全》在Linux系统中,文件名修改是一个常见且重要的操作,文件名修改可以更好地管理文件和文件夹,使其更具可读性和有序性,本文将介绍三种在Linux系统下常用的文件名修改方法... 目录一、引言二、使用mv命令修改文件名三、使用rename命令修改文件名四、mv命令和rename命
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2