网站qq弹窗代码帝国cms 网站描述的全局变量
让DeepSeek生成一个生命天数计算器
提示词prompt
帮我做一个我活了多少天的网页 用户输入出生日期即可显示我活了多少天 页面ui要好看点，加上显示官方统计 人一生平均可以活多少天 自动计算剩余天数。帮我按照上述需求再次生成一个。
源码如下，复制源码到html文件双击运行即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生命天数计算器</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;color: #333;}.container {background: rgba(255, 255, 255, 0.92);backdrop-filter: blur(10px);border-radius: 20px;box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);width: 100%;max-width: 800px;overflow: hidden;animation: fadeIn 0.8s ease-out;}.header {background: linear-gradient(120deg, #4a6fa5, #2a4d69);color: white;text-align: center;padding: 30px 20px;position: relative;overflow: hidden;}.header h1 {font-size: 2.8rem;margin-bottom: 10px;font-weight: 700;text-shadow: 0 2px 4px rgba(0,0,0,0.2);}.header p {font-size: 1.2rem;max-width: 600px;margin: 0 auto;opacity: 0.9;}.content {padding: 30px;}.input-section {display: flex;flex-wrap: wrap;gap: 20px;margin-bottom: 30px;}.input-group {flex: 1;min-width: 250px;}label {display: block;margin-bottom: 10px;font-weight: 600;color: #2a4d69;font-size: 1.1rem;}input, select {width: 100%;padding: 15px;border: 2px solid #d1e3f6;border-radius: 12px;font-size: 1.1rem;transition: all 0.3s;background: #f8fbff;}input:focus, select:focus {border-color: #4a6fa5;outline: none;box-shadow: 0 0 0 4px rgba(74, 111, 165, 0.2);}button {background: linear-gradient(to right, #ff7e5f, #feb47b);color: white;border: none;padding: 16px 35px;font-size: 1.2rem;border-radius: 12px;cursor: pointer;transition: all 0.3s;font-weight: 600;display: block;width: 100%;margin-top: 10px;box-shadow: 0 4px 15px rgba(255, 126, 95, 0.35);letter-spacing: 1px;}button:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(255, 126, 95, 0.5);}.result-section {margin-top: 30px;display: none;animation: slideUp 0.6s ease-out;}.result-section.show {display: block;}.days-card {background: linear-gradient(135deg, #4a6fa5, #2a4d69);color: white;border-radius: 16px;padding: 25px;text-align: center;margin-bottom: 25px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);}.days-card h3 {font-size: 1.4rem;margin-bottom: 15px;font-weight: 500;}.days {font-size: 3.5rem;font-weight: 800;margin: 15px 0;text-shadow: 0 2px 4px rgba(0,0,0,0.2);}.stats-container {background: #f0f7ff;border-radius: 16px;padding: 25px;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);}.stats-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-bottom: 25px;}.stat-card {background: white;border-radius: 12px;padding: 20px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);text-align: center;transition: transform 0.3s;}.stat-card:hover {transform: translateY(-5px);}.stat-card h4 {color: #2a4d69;margin-bottom: 15px;font-size: 1.1rem;}.stat-value {font-size: 2.2rem;font-weight: 700;color: #ff7e5f;margin: 10px 0;}.progress-section {margin-top: 20px;}.progress-header {display: flex;justify-content: space-between;margin-bottom: 10px;font-weight: 600;color: #2a4d69;}.progress-container {height: 25px;background: #e1e9f1;border-radius: 12px;overflow: hidden;box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);}.progress-bar {height: 100%;background: linear-gradient(90deg, #4a6fa5, #ff7e5f);border-radius: 12px;width: 0;transition: width 1s ease-out;}.message {text-align: center;margin-top: 30px;font-size: 1.2rem;line-height: 1.6;color: #2a4d69;padding: 20px;background: rgba(255, 255, 255, 0.7);border-radius: 12px;font-style: italic;}.heart {color: #ff7e5f;margin: 0 5px;animation: pulse 1.5s infinite;}footer {text-align: center;padding: 25px;color: rgba(255, 255, 255, 0.8);font-size: 0.9rem;background: rgba(0, 0, 0, 0.15);margin-top: 20px;}@keyframes fadeIn {from { opacity: 0; transform: translateY(-20px); }to { opacity: 1; transform: translateY(0); }}@keyframes slideUp {from { opacity: 0; transform: translateY(30px); }to { opacity: 1; transform: translateY(0); }}@keyframes pulse {0% { transform: scale(1); }50% { transform: scale(1.2); }100% { transform: scale(1); }}@media (max-width: 600px) {.header h1 {font-size: 2.2rem;}.days {font-size: 2.8rem;}.stat-value {font-size: 1.8rem;}}</style>
</head>
<body><div class="container"><div class="header"><h1><i class="fas fa-heartbeat"></i> 生命天数计算器</h1><p>了解您已度过的人生时光，珍惜当下的每一刻</p></div><div class="content"><div class="input-section"><div class="input-group"><label for="birthdate"><i class="fas fa-birthday-cake"></i> 您的出生日期</label><input type="date" id="birthdate" required></div><div class="input-group"><label for="country"><i class="fas fa-globe-asia"></i> 选择地区（平均寿命）</label><select id="country"><option value="79">中国大陆 (平均寿命79岁)</option><option value="85">中国香港 (平均寿命85岁)</option><option value="84">日本 (平均寿命84岁)</option><option value="83">新加坡 (平均寿命83岁)</option><option value="79">美国 (平均寿命79岁)</option><option value="84">瑞士 (平均寿命84岁)</option><option value="73">全球平均 (平均寿命73岁)</option></select></div></div><button id="calculate-btn"><i class="fas fa-calculator"></i> 计算我的生命天数</button><div class="result-section" id="result-section"><div class="days-card"><h3>您已经在这个世界上度过了</h3><div class="days" id="days">0</div><h3>个珍贵的日子 <i class="fas fa-heart heart"></i></h3></div><div class="stats-container"><div class="stats-grid"><div class="stat-card"><h4>人均预期寿命</h4><div class="stat-value" id="avg-lifespan">79</div><p>岁 (<span id="avg-days">28,835</span>天)</p></div><div class="stat-card"><h4>您的剩余预期天数</h4><div class="stat-value" id="remaining-days">0</div><p>天 (约<span id="remaining-years">0</span>年)</p></div></div><div class="progress-section"><div class="progress-header"><span>您的人生进度</span><span id="life-percentage">0%</span></div><div class="progress-container"><div class="progress-bar" id="progress-bar"></div></div></div></div><div class="message"><p><i class="fas fa-quote-left"></i> 时间是我们最宝贵的财富，每一秒都是不可重来的礼物。<br>您已经度过了 <span id="days-highlight">0</span> 天，还有 <span id="remaining-highlight">0</span> 天可以创造美好回忆。</p></div></div></div><footer>© 2023 生命天数计算器 | 珍惜当下，活出精彩人生 | 数据来源：世界卫生组织</footer></div><script>document.getElementById('calculate-btn').addEventListener('click', function() {// 获取用户输入const birthdate = new Date(document.getElementById('birthdate').value);const today = new Date();const avgLifespan = parseInt(document.getElementById('country').value);// 验证输入if (isNaN(birthdate.getTime())) {alert('请输入有效的出生日期');return;}if (birthdate > today) {alert('出生日期不能晚于今天');return;}// 计算已活天数const diffTime = today - birthdate;const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));// 计算平均寿命天数（考虑闰年）const avgDays = Math.floor(avgLifespan * 365.25);// 计算剩余天数const remainingDays = Math.max(0, Math.floor(avgDays - diffDays));// 计算生命进度百分比const lifePercentage = Math.min(100, (diffDays / avgDays * 100).toFixed(1));// 更新UIdocument.getElementById('days').textContent = diffDays.toLocaleString();document.getElementById('avg-lifespan').textContent = avgLifespan;document.getElementById('avg-days').textContent = avgDays.toLocaleString();document.getElementById('remaining-days').textContent = remainingDays.toLocaleString();document.getElementById('remaining-years').textContent = Math.floor(remainingDays / 365.25);document.getElementById('life-percentage').textContent = lifePercentage + '%';document.getElementById('progress-bar').style.width = lifePercentage + '%';document.getElementById('days-highlight').textContent = diffDays.toLocaleString();document.getElementById('remaining-highlight').textContent = remainingDays.toLocaleString();// 显示结果区域document.getElementById('result-section').classList.add('show');// 添加动画效果const daysElement = document.getElementById('days');daysElement.style.transform = 'scale(1.1)';setTimeout(() => {daysElement.style.transform = 'scale(1)';}, 300);});// 设置默认日期为25年前const defaultDate = new Date();defaultDate.setFullYear(defaultDate.getFullYear() - 25);document.getElementById('birthdate').valueAsDate = defaultDate;</script>
</body>
</html>