DeepSeek生成HTML5生命天數計算器

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