标签：容器 style checkbox const timestamp countdownElement 倒计时 document uniqueCountdownC
<!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>
</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) {
localStorage.setItem(`uniqueCountdown_${timestamp}`, JSON.stringify({
prompt: newPrompt,
datetime: newDatetime
}));
const checkboxId = `uniqueCheckbox_${timestamp}`; // 生成唯一的 checkbox id
const countdownElement = document.getElementById(`uniqueCountdown_${timestamp}`).parentNode;
countdownElement.innerHTML = `<input type="checkbox" class="uniqueCountdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${newPrompt}</strong>: <span id="uniqueCountdown_${timestamp}"></span></label>`;
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>
标签：容器,
style,
checkbox,
const,
timestamp,
countdownElement,
倒计时,
document,
uniqueCountdownC
From： https://blog.csdn.net/lulei5153/article/details/141558545