下面是一个可直接使用的「日期计算器 / 天数计算器」在线工具,支持 两个日期之间相差天数计算,风格简洁,适合放在 网站 / 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>