让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));
// 更新UI
document.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>