独特的倒计时容器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。

相关文章

K8S（Kubernetes）开源的容器编排平台安装步骤详解

K8S（Kubernetes）开源的容器编排平台安装步骤详解

K8S（Kubernetes）是一个开源的容器编排平台，用于自动化部署、扩展和管理容器化应用程序。以下是K8S容器编排平台的安装步骤、使用方式及特点的概述： 安装步骤： 安装Docker：K8S需要基于Docker来运行容器化应用程序。首先要在所有节点上安装Docker引擎。 安装Kubernetes Master：在集群中选择一台主机作为Master节点，安装K8S的控制平面组件，如AP
阅读更多...
Spring框架5 - 容器的扩展功能 (ApplicationContext)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF
阅读更多...
两个月冲刺软考——访问位与修改位的题型(淘汰哪一页)；内聚的类型；关于码制的知识点；地址映射的相关内容

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

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

容器编排平台Kubernetes简介

目录 什么是K8s 为什么需要K8s 什么是容器(Contianer) K8s能做什么？ K8s的架构原理  控制平面(Control plane)         kube-apiserver         etcd         kube-scheduler         kube-controller-manager         cloud-controlle
阅读更多...
如何在运行时修改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
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2