个人预算计算器 - 管理月收入和支出

💰

总收入

¥0

💸

总支出

¥0

💳

结余

¥0

收入管理

支出管理

.budget-overview { margin-bottom: 40px; } .overview-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .overview-card { background: white; padding: 25px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 20px; transition: all 0.3s ease; } .overview-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.15); } .overview-card.income { border-left: 5px solid #28a745; } .overview-card.expense { border-left: 5px solid #dc3545; } .overview-card.balance { border-left: 5px solid #667eea; } .card-icon { font-size: 2.5em; } .card-content { flex: 1; } .card-label { color: #666; font-size: 0.9em; margin-bottom: 5px; } .card-value { font-size: 2em; font-weight: 700; color: #333; } .budget-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .income-section, .expense-section { background: #f8f9fa; padding: 30px; border-radius: 15px; } .income-section h3, .expense-section h3 { color: #333; margin-bottom: 20px; font-size: 1.3em; } .add-item-form { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; } .item-input { padding: 12px 15px; border: 2px solid #ddd; border-radius: 10px; font-size: 1em; transition: all 0.3s ease; } .item-input:focus { border-color: #667eea; outline: none; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .add-btn { padding: 12px 20px; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .income-btn { background: #28a745; color: white; } .income-btn:hover { background: #218838; } .expense-btn { background: #dc3545; color: white; } .expense-btn:hover { background: #c82333; } .items-list { max-height: 400px; overflow-y: auto; } .budget-item { background: white; padding: 15px; border-radius: 10px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .item-info { flex: 1; } .item-description { font-weight: 600; color: #333; margin-bottom: 3px; } .item-category { font-size: 0.8em; color: #666; } .item-amount { font-weight: 700; font-size: 1.1em; } .income-amount { color: #28a745; } .expense-amount { color: #dc3545; } .item-actions { display: flex; gap: 10px; } .action-btn { padding: 5px 10px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.8em; } .edit-btn { background: #ffc107; color: #333; } .delete-btn { background: #dc3545; color: white; } @media (max-width: 768px) { .container { margin: 10px; border-radius: 15px; } .header { padding: 20px; } h1 { font-size: 2em; } .main-content { padding: 20px; } .budget-sections { grid-template-columns: 1fr; gap: 20px; } .overview-cards { grid-template-columns: 1fr; } } // 初始化 document.addEventListener('DOMContentLoaded', function() { renderIncomeItems(); renderExpenseItems(); updateOverview(); }); function addIncomeItem() { const description = document.getElementById('incomeDescription').value.trim(); const amount = parseFloat(document.getElementById('incomeAmount').value); if (!description || !amount || amount <= 0) { alert(currentLang === 'zh' ? '请填写完整的收入信息' : 'Please fill in complete income information'); return; } const item = { id: Date.now(), description: description, amount: amount, date: new Date().toISOString() }; incomeItems.push(item); saveData(); renderIncomeItems(); updateOverview(); // 清空表单 document.getElementById('incomeDescription').value = ''; document.getElementById('incomeAmount').value = ''; } function addExpenseItem() { const description = document.getElementById('expenseDescription').value.trim(); const category = document.getElementById('expenseCategory').value; const amount = parseFloat(document.getElementById('expenseAmount').value); if (!description || !amount || amount <= 0) { alert(currentLang === 'zh' ? '请填写完整的支出信息' : 'Please fill in complete expense information'); return; } const item = { id: Date.now(), description: description, category: category, amount: amount, date: new Date().toISOString() }; expenseItems.push(item); saveData(); renderExpenseItems(); updateOverview(); // 清空表单 document.getElementById('expenseDescription').value = ''; document.getElementById('expenseAmount').value = ''; } function renderIncomeItems() { const list = document.getElementById('incomeList'); if (incomeItems.length === 0) { list.innerHTML = `

${currentLang === 'zh' ? '暂无收入记录' : 'No income records'}

`; return; } list.innerHTML = incomeItems.map(item => `

${item.description}

${new Date(item.date).toLocaleDateString()}

+¥${item.amount.toFixed(2)}

`).join(''); } function renderExpenseItems() { const list = document.getElementById('expenseList'); if (expenseItems.length === 0) { list.innerHTML = `

${currentLang === 'zh' ? '暂无支出记录' : 'No expense records'}

`; return; } const categoryNames = { food: { zh: '餐饮', en: 'Food' }, transport: { zh: '交通', en: 'Transport' }, housing: { zh: '住房', en: 'Housing' }, entertainment: { zh: '娱乐', en: 'Entertainment' }, shopping: { zh: '购物', en: 'Shopping' }, healthcare: { zh: '医疗', en: 'Healthcare' }, education: { zh: '教育', en: 'Education' }, other: { zh: '其他', en: 'Other' } }; list.innerHTML = expenseItems.map(item => `

${item.description}

${categoryNames[item.category][currentLang]} • ${new Date(item.date).toLocaleDateString()}

-¥${item.amount.toFixed(2)}

`).join(''); } function deleteIncomeItem(id) { incomeItems = incomeItems.filter(item => item.id !== id); saveData(); renderIncomeItems(); updateOverview(); } function deleteExpenseItem(id) { expenseItems = expenseItems.filter(item => item.id !== id); saveData(); renderExpenseItems(); updateOverview(); } function updateOverview() { const totalIncome = incomeItems.reduce((sum, item) => sum + item.amount, 0); const totalExpenses = expenseItems.reduce((sum, item) => sum + item.amount, 0); const balance = totalIncome - totalExpenses; document.getElementById('totalIncome').textContent = `¥${totalIncome.toFixed(2)}`; document.getElementById('totalExpenses').textContent = `¥${totalExpenses.toFixed(2)}`; document.getElementById('balance').textContent = `¥${balance.toFixed(2)}`; // 更新结余颜色 const balanceElement = document.getElementById('balance'); if (balance > 0) { balanceElement.style.color = '#28a745'; } else if (balance < 0) { balanceElement.style.color = '#dc3545'; } else { balanceElement.style.color = '#333'; } } function saveData() { localStorage.setItem('budgetIncome', JSON.stringify(incomeItems)); localStorage.setItem('budgetExpenses', JSON.stringify(expenseItems)); }