实现一个简单的记账应用：自动添加时间与页面美化
在现代生活中，记账是管理个人财务的基本技能。今天，我们将学习如何用 HTML、CSS 和 JavaScript 创建一个简单的记账应用，其中包括自动添加时间戳和页面美化的功能。通过这篇文章，你将学会如何使用这些技术来开发一个实用的记账工具，并使其更具吸引力。
项目概述
我们的记账应用将具备以下功能：
- 记录管理：允许用户添加、查看和删除记录。
- 时间自动添加：每次添加记录时，自动附加当前时间。
- 页面美化：通过 CSS 美化页面，使其更具吸引力。
项目结构
本项目包括三个主要文件：
index.html：定义页面结构style.css：设置页面样式script.js：实现功能逻辑
1. HTML 文件
首先，我们创建一个基本的 HTML 文件，用于构建应用的界面。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记账应用</title>
<!-- 链接到 CSS 文件以应用样式 -->
<link rel="stylesheet" href="style.css"></head><body>
<div class="container">
<h1>记账应用</h1>
<!-- 输入描述 -->
<input type="text" id="description" placeholder="描述">
<!-- 输入金额 -->
<input type="number" id="amount" placeholder="金额">
<!-- 添加记录按钮 -->
<button id="add-btn">添加记录</button>
<!-- 显示记录的列表 -->
<ul id="record-list"></ul>
</div>
<!-- 链接到 JavaScript 文件以实现功能 -->
<script src="script.js"></script></body></html>2. CSS 文件
接下来，我们使用 CSS 文件来美化页面。
/* 通用样式 */body, h1, input, button, ul {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置页面背景和对齐方式 */body {
font-family: Arial, sans-serif; /* 字体 */
background-color: #f4f4f4; /* 背景颜色 */
display: flex; /* 使用 Flexbox 布局 */
justify-content: center; /* 水平居中对齐 */
align-items: center; /* 垂直居中对齐 */
height: 100vh; /* 高度为视口高度 */
}
/* 设置容器样式 */.container {
background: #fff; /* 背景颜色 */
border-radius: 8px; /* 圆角 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影 */
padding: 20px; /* 内边距 */
width: 350px; /* 宽度 */
text-align: center; /* 文本居中 */
}
/* 标题样式 */h1 {
color: #333; /* 字体颜色 */
margin-bottom: 20px; /* 底部外边距 */
}
/* 输入框样式 */input {
width: calc(50% - 10px); /* 宽度，减去边距 */
padding: 10px; /* 内边距 */
border: 1px solid #ddd; /* 边框 */
border-radius: 4px; /* 圆角 */
font-size: 16px; /* 字体大小 */
margin-bottom: 10px; /* 底部外边距 */
}
/* 数字输入框样式 */input[type="number"] {
margin-left: 10px; /* 左侧外边距 */
}
/* 添加按钮样式 */#add-btn {
width: 100%; /* 宽度 */
padding: 10px; /* 内边距 */
background-color: #28a745; /* 背景颜色 */
color: #fff; /* 字体颜色 */
border: none; /* 去除边框 */
border-radius: 4px; /* 圆角 */
font-size: 16px; /* 字体大小 */
cursor: pointer; /* 鼠标指针样式 */
transition: background-color 0.3s; /* 背景颜色过渡效果 */
}
/* 按钮悬停效果 */#add-btn:hover {
background-color: #218838; /* 背景颜色变化 */
}
/* 记录列表样式 */#record-list {
list-style-type: none; /* 去除列表项标记 */
padding: 0; /* 去除内边距 */
margin-top: 20px; /* 顶部外边距 */
}
/* 记录项样式 */#record-list li {
background: #f9f9f9; /* 背景颜色 */
border-bottom: 1px solid #ddd; /* 底部边框 */
padding: 10px; /* 内边距 */
font-size: 16px; /* 字体大小 */
display: flex; /* 使用 Flexbox 布局 */
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 垂直居中对齐 */
}
/* 最后一项无底部边框 */#record-list li:last-child {
border-bottom: none; /* 去除底部边框 */
}
/* 时间样式 */.time {
color: #888; /* 字体颜色 */
font-size: 14px; /* 字体大小 */
margin-left: 10px; /* 左侧外边距 */
}
3. JavaScript 文件
最后，我们实现 JavaScript 文件以处理应用逻辑，包括记录的添加、显示和删除功能。
// 当文档加载完成时执行document.addEventListener('DOMContentLoaded', () => {
// 获取 DOM 元素
const descriptionInput = document.getElementById('description'); // 描述输入框
const amountInput = document.getElementById('amount'); // 金额输入框
const addButton = document.getElementById('add-btn'); // 添加按钮
const recordList = document.getElementById('record-list'); // 记录列表
// 渲染记录列表
function renderRecords() {
// 从 localStorage 中获取记录
const records = JSON.parse(localStorage.getItem('records')) || [];
recordList.innerHTML = ''; // 清空记录列表
// 遍历记录并添加到列表中
records.forEach((record, index) => {
const li = document.createElement('li'); // 创建列表项
li.textContent = `${record.description} - ${record.amount}元`; // 设置文本内容
const timeSpan = document.createElement('span'); // 创建时间标签
timeSpan.textContent = record.time; // 设置时间文本
timeSpan.classList.add('time'); // 添加时间样式
const removeButton = document.createElement('button'); // 创建删除按钮
removeButton.textContent = '删除'; // 设置按钮文本
removeButton.classList.add('remove-btn'); // 添加按钮样式
removeButton.addEventListener('click', () => {
// 删除按钮点击事件
records.splice(index, 1); // 从记录数组中删除对应记录
localStorage.setItem('records', JSON.stringify(records)); // 更新 localStorage
renderRecords(); // 重新渲染记录列表
});
// 将时间标签和删除按钮添加到列表项中
li.appendChild(timeSpan);
li.appendChild(removeButton);
recordList.appendChild(li); // 将列表项添加到记录列表中
});
}
// 添加记录按钮点击事件
addButton.addEventListener('click', () => {
const description = descriptionInput.value.trim(); // 获取并修剪描述输入
const amount = parseFloat(amountInput.value.trim()); // 获取并解析金额输入
// 如果描述和金额都有效
if (description && !isNaN(amount)) {
// 从 localStorage 中获取记录
const records = JSON.parse(localStorage.getItem('records')) || [];
const now = new Date().toLocaleString(); // 获取当前时间
// 将新记录添加到记录数组中
records.push({ description, amount, time: now });
localStorage.setItem('records', JSON.stringify(records)); // 更新 localStorage
descriptionInput.value = ''; // 清空描述输入框
amountInput.value = ''; // 清空金额输入框
renderRecords(); // 重新渲染记录列表
}
});
renderRecords(); // 初次渲染记录列表
});
记录管理
1. 添加记录：
- 界面设计：用户界面通常会包括一个表单，用于输入记录内容，例如收入或支出的详细信息、金额等。
- 用户交互：用户填写完表单后，点击“添加”按钮，应用会处理这些输入数据，将其保存到记录列表中。
2. 查看记录：
- 记录展示：记录会以列表或表格的形式展示在页面上。每个记录通常会显示其内容、金额和时间戳。
- 动态更新：当用户添加或删除记录时，记录列表需要动态更新，以确保用户看到的是最新的数据。
3. 删除记录：
- 删除操作：每个记录旁边可能会有一个“删除”按钮或图标，用户可以点击它来删除对应的记录。
- 确认提示：为了防止误删除，删除操作通常会弹出确认提示，要求用户确认是否真的要删除该记录。
时间自动添加
1. 自动附加时间：
- 时间戳生成：每当用户添加一条新记录时，应用会自动生成当前时间的时间戳。这个时间戳通常会以“年-月-日 时:分:秒”的格式显示，或者根据需求自定义格式。
- 记录保存：记录的数据（包括时间戳）会被存储在本地存储中或提交到服务器，以便用户可以随时查看。
2. 时间格式化：
- 用户体验：为了便于阅读，时间戳通常会被格式化为用户友好的格式。例如，显示为“2024年8月8日 14:30”而不是原始的时间戳。
页面美化
1. 使用 CSS 美化页面：
- 布局设计：通过 CSS 定义页面的布局，使其视觉上更加整洁和有序。例如，可以使用 Flexbox 或 Grid 布局来合理安排表单、记录列表和操作按钮。
- 样式应用：应用 CSS 样式来美化页面元素，包括字体、颜色、边距、背景和按钮等。例如，为按钮添加渐变效果、悬停效果，以及为记录列表设置不同的行背景色以提升可读性。
- 响应式设计：使用媒体查询（Media Queries）使页面在不同设备上（如手机、平板和桌面）显示良好，以确保用户体验一致性。
总结
通过本文的介绍，我们成功实现了一个简单的记账应用，具备了自动添加时间戳和美化页面的功能。你可以根据需要进一步扩展和优化这个应用，例如增加编辑功能或数据统计功能。希望这篇文章对你有所帮助
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
