实现费用跟踪器的动态财务概览

背景简介

在开发Web应用程序时，确保其在各种设备上的表现和功能是至关重要的。在本书的第26章中，我们探讨了如何利用HTML、CSS和JavaScript技术实现一个功能全面的费用跟踪器。本章的重点是创建一个能够动态展示财务活动的应用程序，包括交易项目展示、余额和收支计算以及与本地存储的整合。

显示交易项目

首先，我们通过HTML结构设置了一个交易列表容器，接着使用CSS样式来美化界面，最后通过JavaScript动态添加交易项。这部分内容展示了如何将JavaScript与DOM操作相结合，实现数据的动态更新。

HTML 结构

我们首先定义了一个包含 <ul> 元素的 <section> ，用于显示交易列表。每个交易项都将作为 <li> 元素动态插入到列表中。

<section class="交易">
  <h2>交易历史</h2>
  <ul id="交易列表">
    <!-- 将使用JavaScript在此处添加交易项目 -->
  </ul>
</section>

CSS 样式设置

我们为交易列表和各个交易项定义了样式，以使列表看起来更加吸引人。

.transactions {
  margin: 20px 0;
  border: 1px solid #e0e0e0;
  padding: 10px;
}

.transactions h2 {
  text-align: center;
  margin-bottom: 15px;
}

.transaction-list {
  list-style-type: none;
  padding: 0;
}

.transaction-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #e0e0e0;
}

JavaScript Implementation

JavaScript用于在页面加载时显示交易项，同时也负责处理交易数据的更新。我们通过 document.getElementById 方法获取 <ul> 元素，然后遍历交易数组，动态创建 <li> 元素并将其添加到列表中。

const transactionList = document.getElementById('transaction-list');

function displayTransactions() {
  // 清除列表中当前的所有交易项
  transactionList.innerHTML = '';

  // 遍历交易数组并显示每一笔交易
  transactions.forEach(transaction => {
    const item = document.createElement('li');
    item.innerHTML = `
      <span>${transaction.description}</span>
      <span>${transaction.amount > 0 ? '+' : '-'}$${Math.abs(transaction.amount)}</span>
    `;
    item.classList.add(transaction.amount > 0 ? 'income' : 'expense');
    transactionList.appendChild(item);
  });
}

// 假设这是从用户输入或本地存储获取的交易对象数组
const transactions = [/* ... */];

displayTransactions();

显示余额、收入和支出

费用跟踪器的核心功能之一是能够实时显示用户的财务状况，包括余额、收入和支出。这一部分展示了如何通过JavaScript逻辑和DOM操作技术来实现这一功能。

设定舞台

我们首先定义了HTML结构，以便显示用户的余额、收入和支出。

<div class="余额">
  <h3>您的余额</h3>
  <h2 id="balance-amount">$0.00</h2>
  <div class="收入支出">
    <div class="加">
      <h3>收入</h3>
      <p id="income-amount">$0.00</p>
    </div>
    <div class="减">
      <h3>支出</h3>
      <p id="expense-amount">$0.00</p>
    </div>
  </div>
</div>

初始化我们的变量

在JavaScript脚本中，我们初始化了用于计算的变量以及获取DOM元素的引用。

let balance = 0;
let income = 0;
let expense = 0;

const balanceAmount = document.getElementById('balance-amount');
const incomeAmount = document.getElementById('income-amount');
const expenseAmount = document.getElementById('expense-amount');

计算函数

我们创建了一个 calculateTotals 函数，用于根据交易数据计算用户的总收入、总支出和余额。

function calculateTotals(transactions) {
  income = transactions
    .filter(transaction => transaction.amount > 0)
    .reduce((acc, transaction) => acc + transaction.amount, 0);

  expense = transactions
    .filter(transaction => transaction.amount < 0)
    .reduce((acc, transaction) => acc + transaction.amount, 0) * -1;

  balance = income - expense;
}

显示值

计算完成后，我们使用 updateUI 函数更新DOM元素，显示计算结果。

function updateUI() {
  balanceAmount.textContent = `$${balance.toFixed(2)}`;
  incomeAmount.textContent = `$${income.toFixed(2)}`;
  expenseAmount.textContent = `$${expense.toFixed(2)}`;
}

与本地存储集成

为了确保数据的持久性，我们创建了 updateLocalStorage 函数，在每次交易变更后更新本地存储。

function updateLocalStorage() {
  localStorage.setItem('transactions', JSON.stringify(transactions));
  calculateTotals(transactions);
  updateUI();
}

整合到现有交易系统

假设我们有一个机制可以添加或删除交易，我们应确保每次交易变更后调用 updateLocalStorage 函数。

function addTransaction(transaction) {
  transactions.push(transaction);
  updateLocalStorage();
}

function removeTransaction(id) {
  transactions = transactions.filter(transaction => transaction.id !== id);
  updateLocalStorage();
}

总结与启发

通过本章的学习，我们不仅学会了如何展示和更新交易列表，还掌握了如何计算和展示用户的财务状态。这一项目展示了Vanilla JavaScript在构建动态Web应用程序方面的巨大潜力，无需依赖任何外部库或框架。随着我们继续深入学习，我们将增加更多功能，如交易历史的过滤、排序和数据可视化，以进一步增强应用程序的功能性。

提示： 要实现这些功能，你可能需要熟悉更多的JavaScript技术，如事件处理、数组操作和DOM事件监听器等。此外，理解Web存储机制如本地存储和会话存储，将有助于你创建更持久和用户友好的应用程序。