一个人生倒计时的网页应用
这是一个非常棒的想法！开发一个“人生倒计时”网页应用不仅能帮助用户直观地感受时间，也是学习HTML、CSS 和 JavaScript协同工作的经典实践。
为了确保我提供的代码完全符合你的需求，我先确认一下初步的功能设想：
1. 核心逻辑概述
该应用通常包含以下部分：
输入模块：用户输入出生日期和预期寿命（例如 80 岁）。
计算模块：JavaScript 计算当前时间与目标时间的差值，精确到秒甚至毫秒。
展示模块：一个实时更新的数字时钟，或者一个充满格子的“人生进度条”。
2. 开发步骤规划
我将分三个阶段带你完成：
静态结构 (HTML)：构建应用的骨架（标题、输入框、倒计时显示区域）。
样式美化 (CSS)：让页面看起来简洁、大方，甚至带有一点哲理的静谧感。
动态逻辑 (JavaScript)：编写计算函数，并设置定时器实现每秒刷新。
3. 我需要确认的细节
在开始编写完整代码前，请告诉我你的偏好：
展示风格：你希望看到的是数字倒计时（还剩多少天、多少小时），还是视觉进度条（比如 900 个格子代表 900 个月，涂满已过去的部分）？
技术栈：直接使用原生HTML/JS（无需安装，双击即可运行），还是使用像React或Vue这样的框架？（如果是初学者，建议从原生开始）。
附加功能：是否需要“保存”功能？（让用户下次打开网页时不用重新输入，这涉及浏览器的
localStorage技术）。
一旦你确认了这些，我将立即为你生成完整的、可运行的代码！
代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>人生倒计时 - 珍惜当下</title> <style> /* CSS 样式：负责美化界面 */ body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; background-color: #f4f4f9; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; color: #333; } .container { background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: center; width: 90%; max-width: 500px; } h1 { font-size: 1.5rem; margin-bottom: 1.5rem; } .input-group { margin-bottom: 1.5rem; } input { padding: 8px; border: 1px solid #ddd; border-radius: 5px; outline: none; } #countdown { font-size: 1.2rem; margin: 20px 0; line-height: 1.6; } /* 进度条容器 */ .progress-container { background: #eee; border-radius: 20px; height: 25px; width: 100%; overflow: hidden; margin-top: 10px; } /* 进度条填充部分 */ .progress-bar { background: linear-gradient(90deg, #ff7e5f, #feb47b); height: 100%; width: 0%; transition: width 0.5s ease; } .footer { font-size: 0.8rem; color: #888; margin-top: 2rem; } </style> </head> <body> <div class="container"> <h1>人生倒计时</h1> <div class="input-group"> <label>你的出生日期：</label> <input type="date" id="birthday" onChange="saveAndCalculate()"> </div> <div id="countdown">请输入生日查看倒计时</div> <div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> <p id="percentageText" style="font-size: 0.9rem; margin-top: 5px;"></p> <div class="footer">“人生的意义在于，你在这一秒做了什么。”</div> </div> <script> // JavaScript 逻辑：负责计算和数据存储 const EXPECTED_AGE = 75; // 假设预期寿命为80岁 // 页面加载时尝试读取本地存储 window.onload = function() { const savedBirthday = localStorage.getItem('userBirthday'); if (savedBirthday) { document.getElementById('birthday').value = savedBirthday; startCountdown(); } }; function saveAndCalculate() { const birthdayVal = document.getElementById('birthday').value; if (birthdayVal) { localStorage.setItem('userBirthday', birthdayVal); startCountdown(); } } function startCountdown() { // 使用定时器，每秒刷新一次 setInterval(updateUI, 1000); updateUI(); } function updateUI() { const birthdayStr = document.getElementById('birthday').value; if (!birthdayStr) return; const birthDate = new Date(birthdayStr); const now = new Date(); const deathDate = new Date(birthDate.getFullYear() + EXPECTED_AGE, birthDate.getMonth(), birthDate.getDate()); const totalLifeMs = deathDate - birthDate; // 总寿命毫秒数 const livedMs = now - birthDate; // 已度过毫秒数 const remainingMs = deathDate - now; // 剩余毫秒数 if (remainingMs < 0) { document.getElementById('countdown').innerHTML = "你已经超越了预期的 70 岁，每一天都是额外的恩赐！"; updateProgress(100); return; } // 计算剩余的天、时、分、秒 const days = Math.floor(remainingMs / (1000 * 60 * 60 * 24)); const hours = Math.floor((remainingMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const mins = Math.floor((remainingMs % (1000 * 60 * 60)) / (1000 * 60)); const secs = Math.floor((remainingMs % (1000 * 60)) / 1000); // 更新数字显示 document.getElementById('countdown').innerHTML = ` 距离 70 岁还剩：<br> <strong>${days}</strong> 天 <strong>${hours}</strong> 小时 <strong>${mins}</strong> 分 <strong>${secs}</strong> 秒 `; // 计算并更新进度条 const percent = (livedMs / totalLifeMs * 100).toFixed(2); updateProgress(percent); } function updateProgress(percent) { document.getElementById('progressBar').style.width = percent + "%"; document.getElementById('percentageText').innerText = `人生进度：${percent}%`; } </script> </body> </html>