本帖最后由 思念是因为你 于 2025-4-1 17:26 编辑
闲来无事翻到之前想查看自己还要多久退休的时间工具，拿来分享一下，顺便增加一个未来时间计算的功能。做着玩的，希望大家用的上，东西比较简单，给点鼓励就好。
工具介绍
1. 时间倒计时/正计时功能- 功能：用户可以选择一个日期，工具会实时显示从这个日期到当前时间之间的间隔。
- 特点：
- 支持过去时间（正计时）和未来时间（倒计时）
- 自动识别显示"还剩"或"已过"状态
- 彩色提示：未来时间绿色显示，过去时间红色显示
- 精确显示年、月、日、时、分、秒
- 自动保存用户上次设置的时间（使用localStorage）
- 实时动态更新（每秒刷新一次）
2. 未来日期计算功能- 功能：用户可以输入一个正整数天数，工具会自动计算并显示从今天开始该天数后对应的日期，并以中文格式展示星期、月份等信息。
- 特点：
- 支持输入任意正整数天数
- 显示完整日期格式（年月日+星期几）
- 例如："从今天开始30天后是：2025年5月1日星期四"
- 输入验证确保只接受有效数字
- 结果加粗显示更醒目
其他特点- 响应式设计：适配不同屏幕尺寸
- 直观界面：卡片式布局，色彩区分不同状态
- 即开即用：纯前端实现，无需网络连接
- 数据持久化：自动记住用户最后设置的日期
- 代码结构清晰：通过将毫秒常量与格式化函数提前定义，提升了代码可维护性。
- 逻辑简化：加载默认值的逻辑先检查 localStorage，再设置默认值，避免重复覆盖。
这个工具非常适合用于：- 重要日子的倒计时（生日、节日、纪念日）
- 项目截止时间提醒
- 计算任务完成日期
- 记录事件已发生的时间长度
注意：所有计算都在本地浏览器完成，保护用户隐私，且代码尽量做到简洁清晰，便于日后扩展和维护。
抛砖引玉，需要增加其他功能的，请自由发挥。
修改本代码发帖，请注明出处。
使用方法：将代码复制到本地文本文档，将后缀改为html可直接运行，也可部署到自己的网站中。
[JavaScript] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Easy分享时间间隔统计小工具</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0;
background: #f0f2f5;
}
.container {
text-align: center;
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
margin-top: 2rem;
}
h1 {
color: #2c3e50;
margin-bottom: 2rem;
}
.countdown {
display: flex;
justify-content: center;
gap: 2rem;
margin: 2rem 0;
}
.time-box {
background: #3498db;
color: white;
padding: 1rem 2rem;
border-radius: 8px;
min-width: 100px;
}
.number {
font-size: 2.5rem;
font-weight: bold;
}
.label {
font-size: 0.9rem;
margin-top: 0.5rem;
}
#dateInput, #customDaysInput {
padding: 0.5rem;
font-size: 1rem;
margin-bottom: 1rem;
border: 2px solid #3498db;
border-radius: 5px;
}
.expired {
color: #e74c3c;
font-size: 1.5rem;
font-weight: bold;
}
.info {
margin: 1rem 0;
font-size: 1.2rem;
font-weight: bold;
}
.custom-days-section {
margin-top: 2rem;
}
.custom-days-info {
margin-top: 1rem;
font-size: 1.2rem;
color: #34495e;
}
button {
padding: 0.5rem 1rem;
background: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<h1>时间间隔统计小工具</h1>
<!-- 日期输入框 -->
<input type="datetime-local" id="dateInput" required>
<!-- 时间状态提示信息 -->
<div id="info" class="info"></div>
<!-- 倒计时显示 -->
<div class="countdown">
<div class="time-box">
<div class="number" id="years">00</div>
<div class="label">年</div>
</div>
<div class="time-box">
<div class="number" id="months">00</div>
<div class="label">月</div>
</div>
<div class="time-box">
<div class="number" id="days">00</div>
<div class="label">天</div>
</div>
<div class="time-box">
<div class="number" id="hours">00</div>
<div class="label">时</div>
</div>
<div class="time-box">
<div class="number" id="minutes">00</div>
<div class="label">分</div>
</div>
<div class="time-box">
<div class="number" id="seconds">00</div>
<div class="label">秒</div>
</div>
</div>
<div id="message" class="expired"></div>
<!-- 自定义天数计算功能 -->
<div class="custom-days-section">
<h2>未来天数计算</h2>
<input type="number" id="customDaysInput" placeholder="请输入天数" required>
<button id="calculateCustomDays">计算</button>
<div id="customDaysInfo" class="custom-days-info"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const dateInput = document.getElementById('dateInput');
const infoElement = document.getElementById('info');
const yearsElement = document.getElementById('years');
const monthsElement = document.getElementById('months');
const daysElement = document.getElementById('days');
const hoursElement = document.getElementById('hours');
const minutesElement = document.getElementById('minutes');
const secondsElement = document.getElementById('seconds');
const customDaysInput = document.getElementById('customDaysInput');
const calculateCustomDaysButton = document.getElementById('calculateCustomDays');
const customDaysInfoElement = document.getElementById('customDaysInfo');
// 常量定义（毫秒）
const MS_IN_YEAR = 1000 * 60 * 60 * 24 * 365;
const MS_IN_MONTH = 1000 * 60 * 60 * 24 * 30;
const MS_IN_DAY = 1000 * 60 * 60 * 24;
const MS_IN_HOUR = 1000 * 60 * 60;
const MS_IN_MINUTE = 1000 * 60;
// 封装数字格式化函数
const pad = num => num.toString().padStart(2, '0');
// 先尝试加载保存的时间
const savedDate = localStorage.getItem('countdownDate');
if (savedDate) {
dateInput.value = savedDate;
} else {
// 如果没有保存，则默认设置为昨天此时
const defaultDate = new Date();
defaultDate.setDate(defaultDate.getDate() - 1);
dateInput.value = defaultDate.toISOString().slice(0, 16);
}
const updateCountdown = () => {
const targetDate = new Date(dateInput.value);
const now = new Date();
const diff = Math.abs(targetDate - now);
// 更新提示信息
if (targetDate > now) {
infoElement.textContent = "距离目标时间还剩：";
infoElement.style.color = "#2ecc71";
} else {
infoElement.textContent = "从目标时间到现在已过：";
infoElement.style.color = "#e74c3c";
}
const years = Math.floor(diff / MS_IN_YEAR);
const remainingAfterYears = diff % MS_IN_YEAR;
const months = Math.floor(remainingAfterYears / MS_IN_MONTH);
const remainingAfterMonths = remainingAfterYears % MS_IN_MONTH;
const days = Math.floor(remainingAfterMonths / MS_IN_DAY);
const hours = Math.floor((remainingAfterMonths % MS_IN_DAY) / MS_IN_HOUR);
const minutes = Math.floor((remainingAfterMonths % MS_IN_HOUR) / MS_IN_MINUTE);
const seconds = Math.floor((remainingAfterMonths % MS_IN_MINUTE) / 1000);
yearsElement.textContent = pad(years);
monthsElement.textContent = pad(months);
daysElement.textContent = pad(days);
hoursElement.textContent = pad(hours);
minutesElement.textContent = pad(minutes);
secondsElement.textContent = pad(seconds);
};
// 定时更新
updateCountdown();
setInterval(updateCountdown, 1000);
// 日期输入改变时保存用户选择
dateInput.addEventListener('change', () => {
localStorage.setItem('countdownDate', dateInput.value);
});
// 自定义天数计算
calculateCustomDaysButton.addEventListener('click', () => {
const customDays = parseInt(customDaysInput.value, 10);
if (isNaN(customDays) || customDays <= 0) {
customDaysInfoElement.textContent = "请输入有效的正整数天数！";
return;
}
const now = new Date();
const targetDate = new Date(now.getTime() + customDays * MS_IN_DAY);
const formattedDate = new Intl.DateTimeFormat('zh-CN', {
year: 'numeric',
month: 'long',
weekday: 'long',
day: 'numeric'
}).format(targetDate);
customDaysInfoElement.textContent = `从今天开始 ${customDays} 天后是：${formattedDate}`;
customDaysInfoElement.style.fontWeight = "bold";
customDaysInfoElement.style.color = "#2c3e50";
});
});
</script>
</body>
</html>
预览图
| 
|
发表于 2025-4-1 17:22
|楼主
发表于 2025-4-8 08:45
分享到朋友圈
