下面是一个可直接使用的「日期计算器 / 天数计算器」在线工具，支持 两个日期之间相差天数计算，风格简洁，适合放在 网站 / WordPress / 工具页 中。
📅 日期计算器 – 天数计算器
在线日期计算工具（纯前端，无需后端）
✅ 功能说明
- 计算 两个日期之间相差的天数
- 支持正向 / 反向日期
- 自动判断闰年
- 一键计算，结果即时显示
- 适合嵌入网页、博客、工具站
🧮 使用示例
- 2020-01-01 → 2025-01-01
👉 相差 1827 天 - 可用于：
- 合同期限计算
- 生日 / 纪念日
- 项目工期
- 学习天数统计
💡 完整可用代码（HTML + CSS + JS）
复制即可用，保存为
date-calculator.html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>日期計算器 - 天數計算器 | 在線日期計算工具</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont;
background: #0f172a;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.card {
background: #111827;
padding: 30px;
border-radius: 16px;
width: 100%;
max-width: 420px;
box-shadow: 0 20px 40px rgba(0,0,0,.4);
}
h1 {
text-align: center;
font-size: 22px;
margin-bottom: 20px;
}
label {
display: block;
margin: 15px 0 5px;
font-size: 14px;
color: #cbd5f5;
}
input {
width: 100%;
padding: 12px;
border-radius: 10px;
border: none;
font-size: 16px;
}
button {
margin-top: 20px;
width: 100%;
padding: 14px;
font-size: 16px;
border: none;
border-radius: 12px;
cursor: pointer;
background: linear-gradient(135deg,#6366f1,#3b82f6);
color: #fff;
}
.result {
margin-top: 20px;
text-align: center;
font-size: 18px;
color: #38bdf8;
}
</style>
</head>
<body>
<div class="card">
<h1>📅 日期計算器 / 天數計算器</h1>
<label>開始日期</label>
<input type="date" id="startDate">
<label>結束日期</label>
<input type="date" id="endDate">
<button onclick="calcDays()">計算天數</button>
<div class="result" id="result"></div>
</div>
<script>
function calcDays() {
const start = new Date(document.getElementById('startDate').value);
const end = new Date(document.getElementById('endDate').value);
if (!start || !end || isNaN(start) || isNaN(end)) {
document.getElementById('result').innerText = '請選擇正確的日期';
return;
}
const diff = Math.abs(end - start);
const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
document.getElementById('result').innerText =
`📊 兩個日期相差 ${days} 天`;
}
</script>
</body>
</html>