原生JavaScript实现记账凭证功能

首先，我们需要在HTML文件中创建一个表单，用于添加记账凭证的记录。这个表单需要包含输入框用于输入金额、文本框用于输入备注和提交按钮。代码如下：

<form id="invoiceForm">
<label for="amount">金额：</label>
<input type="number" id="amount" required>
<br>
<label for="description">备注：</label>
<input type="text" id="description" required>
<br>
<button type="submit">添加记录</button>
</form>
<div id="invoiceList"></div>

接下来，我们需要在JavaScript文件中编写代码来实现添加记录和显示记录的功能。代码如下：

// 获取表单元素和列表元素
const form = document.getElementById('invoiceForm');
const list = document.getElementById('invoiceList');
// 处理表单提交事件
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
// 获取输入框中的金额和备注
const amount = document.getElementById('amount').value;
const description = document.getElementById('description').value;
// 创建一个新的列表项，并添加到列表中
const listItem = document.createElement('li');
listItem.textContent = `${description} - 金额：${amount}`;
list.appendChild(listItem);
// 清空输入框
document.getElementById('amount').value = '';
document.getElementById('description').value = '';
});

最后，我们需要在JavaScript文件中编写代码来实现计算总金额的功能。我们可以遍历列表中的每个列表项，将每个列表项中的金额相加即可得到总金额。代码如下：

// 计算总金额
function calculateTotal() {
let total = 0;
const listItems = document.querySelectorAll('li');
for (let i = 0; i < listItems.length; i++) {
const amount = parseFloat(listItems[i].textContent.split('-')[1].trim());
total += amount;
}
return total;
}