写一个html记账程序
时间: 2023-11-28 09:04:26 浏览: 50
好的,以下是一个简单的 HTML 记账程序的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>记账程序</title>
<meta charset="utf-8">
</head>
<body>
<h1>记账程序</h1>
<form>
<label for="date">日期:</label>
<input type="date" id="date" name="date"><br><br>
<label for="amount">金额:</label>
<input type="number" id="amount" name="amount"><br><br>
<label for="category">类别:</label>
<select id="category" name="category">
<option value="food">食物</option>
<option value="clothing">衣服</option>
<option value="housing">住房</option>
<option value="transportation">交通</option>
</select><br><br>
<input type="button" value="提交" onclick="addExpense()">
</form>
<h2>支出记录</h2>
<table>
<thead>
<tr>
<th>日期</th>
<th>金额</th>
<th>类别</th>
</tr>
</thead>
<tbody id="expenseTable">
</tbody>
</table>
<script>
function addExpense() {
var date = document.getElementById("date").value;
var amount = document.getElementById("amount").value;
var category = document.getElementById("category").value;
var table = document.getElementById("expenseTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = date;
cell2.innerHTML = amount;
cell3.innerHTML = category;
document.getElementById("date").value = "";
document.getElementById("amount").value = "";
document.getElementById("category").value = "food";
}
</script>
</body>
</html>
```
这个程序包含一个表单,用户可在其中输入日期、金额和类别,并且可以将输入的信息添加到支出记录中。程序使用 HTML 表单和 JavaScript 对用户输入进行处理。