貓咪生活質素計算器

分類：生物學

---

// 貓咪生活質素計算器 document.addEventListener('DOMContentLoaded', function() { // DOM 元素 const catNameInput = document.getElementById('cat-name'); const catAgeInput = document.getElementById('cat-age'); const catBreedInput = document.getElementById('cat-breed'); const assessmentDateInput = document.getElementById('assessment-date'); const notesTextarea = document.getElementById('notes'); const calculateBtn = document.getElementById('calculate-btn'); const saveBtn = document.getElementById('save-btn'); const resetBtn = document.getElementById('reset-btn'); const resultContainer = document.getElementById('result-container'); const overallScore = document.getElementById('overall-score'); const scoreRating = document.getElementById('score-rating'); const scorePercentage = document.getElementById('score-percentage'); const gaugeMarker = document.getElementById('gauge-marker'); const catNameDisplay = document.getElementById('cat-name-display'); const assessmentDateDisplay = document.getElementById('assessment-date-display'); const recommendationsContent = document.getElementById('recommendations-content'); // 分類得分元素 const appetiteScore = document.getElementById('appetite-score'); const hydrationScore = document.getElementById('hydration-score'); const mobilityScore = document.getElementById('mobility-score'); const groomingScore = document.getElementById('grooming-score'); const socialScore = document.getElementById('social-score'); const comfortScore = document.getElementById('comfort-score'); const playScore = document.getElementById('play-score'); // 分類進度條 const appetiteProgress = document.getElementById('appetite-progress'); const hydrationProgress = document.getElementById('hydration-progress'); const mobilityProgress = document.getElementById('mobility-progress'); const groomingProgress = document.getElementById('grooming-progress'); const socialProgress = document.getElementById('social-progress'); const comfortProgress = document.getElementById('comfort-progress'); const playProgress = document.getElementById('play-progress'); // 將預設評估日期設為今天 const today = new Date(); const formattedToday = formatDateForInput(today); assessmentDateInput.value = formattedToday; // 事件監聽器 calculateBtn.addEventListener('click', calculateScore); saveBtn.addEventListener('click', saveAssessment); resetBtn.addEventListener('click', resetCalculator); // 格式化日期用於輸入欄位 function formatDateForInput(date) { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; } // 格式化日期用於顯示 function formatDateForDisplay(date) { const options = { year: 'numeric', month: 'short', day: 'numeric' }; return date.toLocaleDateString(undefined, options); } // 計算生活質素得分 function calculateScore() { // 獲取貓咪資訊 const catName = catNameInput.value || '您的貓咪'; const catAge = parseFloat(catAgeInput.value) || 0; const catBreed = catBreedInput.value || '貓咪'; const assessmentDate = new Date(assessmentDateInput.value) || new Date(); // 獲取所有分類的得分 const appetite = parseInt(document.querySelector('input[name="appetite"]:checked').value); const hydration = parseInt(document.querySelector('input[name="hydration"]:checked').value); const mobility = parseInt(document.querySelector('input[name="mobility"]:checked').value); const grooming = parseInt(document.querySelector('input[name="grooming"]:checked').value); const social = parseInt(document.querySelector('input[name="social"]:checked').value); const comfort = parseInt(document.querySelector('input[name="comfort"]:checked').value); const play = parseInt(document.querySelector('input[name="play"]:checked').value); // 計算總得分 const totalScore = appetite + hydration + mobility + grooming + social + comfort + play; const percentage = Math.round((totalScore / 35) * 100); // 確定評級 let rating = ''; if (totalScore <= 14) { rating = '差'; } else if (totalScore <= 21) { rating = '一般'; } else if (totalScore <= 28) { rating = '良好'; } else { rating = '優秀'; } // 更新結果顯示 overallScore.textContent = totalScore; scoreRating.textContent = rating; scorePercentage.textContent = `${percentage}%`; // 更新儀表指示器位置 const gaugePosition = (totalScore - 7) / 28 * 100; // 將範圍 7-35 映射到 0-100% gaugeMarker.style.left = `${gaugePosition}%`; // 設定儀表指示器的適當顏色類別 gaugeMarker.className = 'gauge-marker'; if (totalScore <= 14) { gaugeMarker.classList.add('poor-marker'); } else if (totalScore <= 21) { gaugeMarker.classList.add('fair-marker'); } else if (totalScore <= 28) { gaugeMarker.classList.add('good-marker'); } else { gaugeMarker.classList.add('excellent-marker'); } // 更新貓咪名稱和評估日期 catNameDisplay.textContent = `${catName}的`; assessmentDateDisplay.textContent = formatDateForDisplay(assessmentDate); // 更新分類得分和進度條 appetiteScore.textContent = appetite; hydrationScore.textContent = hydration; mobilityScore.textContent = mobility; groomingScore.textContent = grooming; socialScore.textContent = social; comfortScore.textContent = comfort; playScore.textContent = play; appetiteProgress.style.width = `${(appetite / 5) * 100}%`; hydrationProgress.style.width = `${(hydration / 5) * 100}%`; mobilityProgress.style.width = `${(mobility / 5) * 100}%`; groomingProgress.style.width = `${(grooming / 5) * 100}%`; socialProgress.style.width = `${(social / 5) * 100}%`; comfortProgress.style.width = `${(comfort / 5) * 100}%`; playProgress.style.width = `${(play / 5) * 100}%`; // 為進度條添加適當的顏色類別 setProgressBarColor(appetiteProgress, appetite); setProgressBarColor(hydrationProgress, hydration); setProgressBarColor(mobilityProgress, mobility); setProgressBarColor(groomingProgress, grooming); setProgressBarColor(socialProgress, social); setProgressBarColor(comfortProgress, comfort); setProgressBarColor(playProgress, play); // 生成建議 generateRecommendations(totalScore, appetite, hydration, mobility, grooming, social, comfort, play, catAge); // 顯示結果 resultContainer.classList.remove('hidden'); // 滾動到結果 resultContainer.scrollIntoView({ behavior: 'smooth' }); } // 設定進度條的顏色類別 function setProgressBarColor(progressBar, score) { progressBar.className = 'category-progress'; if (score <= 1) { progressBar.classList.add('critical-score'); } else if (score <= 2) { progressBar.classList.add('poor-score'); } else if (score <= 3) { progressBar.classList.add('fair-score'); } else if (score <= 4) { progressBar.classList.add('good-score'); } else { progressBar.classList.add('excellent-score'); } } // 根據得分生成建議 function generateRecommendations(totalScore, appetite, hydration, mobility, grooming, social, comfort, play, catAge) { let recommendations = []; // 根據總得分的整體建議 if (totalScore <= 14) { recommendations.push(`

整體評估：${catNameInput.value || '您的貓咪'}的生活質素得分顯示出重大問題。我們建議盡快與您的獸醫聯繫，討論護理選項和可能的干預措施。

`); } else if (totalScore <= 21) { recommendations.push(`

整體評估：${catNameInput.value || '您的貓咪'}的生活質素有一些令人擔憂的地方。建議安排獸醫檢查以討論如何解決這些問題。

`); } else if (totalScore <= 28) { recommendations.push(`

整體評估：${catNameInput.value || '您的貓咪'}的生活質素整體良好，但有一些可以改進的地方。建議定期監測。

`); } else { recommendations.push(`

整體評估：${catNameInput.value || '您的貓咪'}的生活質素非常優秀。請繼續保持目前的護理方式並定期進行獸醫檢查。

`); } // 根據各分類的低分生成具體建議 if (appetite <= 2) { recommendations.push(`

食慾與進食：嘗試提供多種濕糧，稍微加熱食物，手餵，或與獸醫討論使用食慾促進劑。密切監測體重，並考慮更頻繁的小餐。

`); } if (hydration <= 2) { recommendations.push(`

水分攝取：考慮使用貓咪飲水機，在水中加入少量金槍魚汁，提供濕糧，或在家中多處放置水碗。如果脫水情況嚴重，您的獸醫可能會建議皮下補液。

`); } if (mobility <= 2) { recommendations.push(`

行動力與活動：與獸醫討論疼痛管理選項，確保貓咪能輕鬆接觸資源（食物、水、貓砂盆），提供坡道或階梯到達喜愛的棲息地，並考慮使用關節補充劑（需經獸醫批准）。

`); } if (grooming <= 2) { recommendations.push(`

梳理與衛生：使用柔軟的刷子輕輕梳理，考慮提供低邊的貓砂盆以便進入，監測梳理時是否有疼痛跡象，並與獸醫討論梳理變化的可能原因。

`); } if (social <= 2) { recommendations.push(`

社交行為：創造安全空間讓貓咪可以觀察家庭活動，保持一致的日常作息，使用舒緩的貓費洛蒙產品，並尊重貓咪的界限，同時在牠們願意時提供溫和的互動。

`); } if (comfort <= 2) { recommendations.push(`

舒適度與疼痛管理：立即與獸醫討論疼痛管理選項，提供安靜區域的柔軟床墊，保持舒適的室溫，並減少會引起不適的處理方式。

`); } if (play <= 2) { recommendations.push(`

玩樂與豐富環境：嘗試不同類型的玩具（羽毛棒、益智餵食器、皺皺玩具），提供窗邊棲息地以增加視覺刺激，引入貓薄荷或銀藤（如果貓咪有反應），並進行短時間的溫和遊戲。

`); } // 年齡相關建議 if (catAge >= 10) { recommendations.push(`

老年貓咪護理：對於老年貓咪，建議更頻繁地進行生活質素評估（每週一次）和定期獸醫檢查（每六個月一次）。考慮老年貓專用飲食、關節補充劑和支持行動力與舒適度的環境調整。

`); } // 如果所有得分都良好 if (appetite > 3 && hydration > 3 && mobility > 3 && grooming > 3 && social > 3 && comfort > 3 && play > 3) { recommendations.push(`

維持優秀的生活質素：繼續目前的護理方式。定期遊戲、環境豐富化、預防性健康護理和例行獸醫檢查將有助於維持這種優秀的生活質素。

`); } // 更新建議內容 recommendationsContent.innerHTML = recommendations.join(''); } // 保存評估數據 function saveAssessment() { // 收集所有評估數據 const catName = catNameInput.value || '未命名的貓咪'; const catAge = parseFloat(catAgeInput.value) || 0; const catBreed = catBreedInput.value || '未知'; const assessmentDate = assessmentDateInput.value || formatDateForInput(new Date()); const notes = notesTextarea.value || ''; // 獲取所有分類的得分 const appetite = parseInt(document.querySelector('input[name="appetite"]:checked').value); const hydration = parseInt(document.querySelector('input[name="hydration"]:checked').value); const mobility = parseInt(document.querySelector('input[name="mobility"]:checked').value); const grooming = parseInt(document.querySelector('input[name="grooming"]:checked').value); const social = parseInt(document.querySelector('input[name="social"]:checked').value); const comfort = parseInt(document.querySelector('input[name="comfort"]:checked').value); const play = parseInt(document.querySelector('input[name="play"]:checked').value); // 計算總得分 const totalScore = appetite + hydration + mobility + grooming + social + comfort + play; // 創建評估對象 const assessment = { catName, catAge, catBreed, assessmentDate, notes, scores: { appetite, hydration, mobility, grooming, social, comfort, play }, totalScore }; // 從 localStorage 獲取現有的評估數據或初始化為空數組 let savedAssessments = JSON.parse(localStorage.getItem('catQolAssessments')) || []; // 添加當前評估 savedAssessments.push(assessment); // 保存到 localStorage localStorage.setItem('catQolAssessments', JSON.stringify(savedAssessments)); alert('評估已成功保存！'); } // 重置計算器 function resetCalculator() { // 重置貓咪資訊 catNameInput.value = ''; catAgeInput.value = '7'; catBreedInput.value = ''; assessmentDateInput.value = formattedToday; notesTextarea.value = ''; // 重置單選按鈕為預設值（中間選項） document.getElementById('appetite-3').checked = true; document.getElementById('hydration-3').checked = true; document.getElementById('mobility-3').checked = true; document.getElementById('grooming-3').checked = true; document.getElementById('social-3').checked = true; document.getElementById('comfort-3').checked = true; document.getElementById('play-3').checked = true; // 隱藏結果 resultContainer.classList.add('hidden'); // 滾動到頂部 window.scrollTo({ top: 0, behavior: 'smooth' }); } });