用Java script生成一个记账工具app
时间: 2024-04-17 09:27:50 浏览: 11
当然可以!以下是一个简单的示例代码,用于生成一个记账工具的 JavaScript 应用程序:
```html
<!DOCTYPE html>
<html>
<head>
<title>记账工具</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
.form-group {
margin-bottom: 10px;
}
.form-group label {
display: block;
font-weight: bold;
}
</style>
</head>
<body>
<h1>记账工具</h1>
<div id="app">
<div class="form-group">
<label for="date">日期:</label>
<input type="text" id="date">
</div>
<div class="form-group">
<label for="category">类别:</label>
<input type="text" id="category">
</div>
<div class="form-group">
<label for="amount">金额:</label>
<input type="text" id="amount">
</div>
<button onclick="addExpense()">添加支出</button>
<table id="expenseTable">
<thead>
<tr>
<th>日期</th>
<th>类别</th>
<th>金额</th>
</tr>
</thead>
<tbody id="expenseBody">
</tbody>
</table>
</div>
<script>
function addExpense() {
var date = document.getElementById('date').value;
var category = document.getElementById('category').value;
var amount = document.getElementById('amount').value;
var expenseTable = document.getElementById('expenseTable');
var expenseBody = document.getElementById('expenseBody');
var newRow = expenseBody.insertRow();
newRow.innerHTML = `<td>${date}</td><td>${category}</td><td>${amount}</td>`;
document.getElementById('date').value = '';
document.getElementById('category').value = '';
document.getElementById('amount').value = '';
}
</script>
</body>
</html>
```
这段代码创建了一个简单的记账工具应用程序的前端界面。它包含了输入表单和一个用于显示支出记录的表格。每当点击"添加支出"按钮时,会将输入的日期、类别和金额添加到表格中,并清空输入框。你可以根据自己的需求对界面进行修改和扩展。