当前位置：首页 > news >正文

DeepSeek生成HTML5生命天数计算器

news 来源：原创 2025/6/22 16:09:03

让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>