<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>房租水电费记账本(内置数组数据版)</title>
<style>
table {
user-select: none;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>
<input type="month" id="monthInput">
</th>
<th colspan="6">2024年7月25号开始(303)房租水电费记账本(押金500元)</th>
</tr>
<tr>
<th>月份</th>
<th>房租(500元/月)</th>
<th>水费(5元/吨)</th>
<th>电费(1元/度)</th>
<th>总和</th>
<th>实缴</th>
<th>备注</th>
</tr>
</thead>
<tbody id="monthRows">
<!-- 月份行将动态生成 -->
</tbody>
</table>
</body>
<script>
const records = [
{
日期: '2024年7月25号',
房租: 1000, // 房租:10000元
水: 66, // 水:66吨
电: 2316, // 电:2316度
实缴: 1000, // 实缴1000元
备注: '房租月份为2024年7月25号开始,开始交一个月房租500元+500元押金=1000元'
},
{
日期: '2024年8月25号',
房租: 1500,
水: 68,
电: 2537,
实缴: 1731,
备注: '8月份开始交3个月房租,房租3-1剩2'
},
{
日期: '2024年9月25号',
房租: 0,
水: 68,
电: 2537,
实缴: 0,
备注: '测试数据,房租3-2剩1'
},
{
日期: '2024年10月25号',
房租: 0,
水: 68,
电: 2537,
实缴: 0,
备注: '测试数据,房租3-3剩0'
},
{
日期: '2024年11月25号',
房租: 0,
水: 68,
电: 2537,
实缴: 0,
备注: '测试数据,房租开始交房租'
},
];
// 获取月份输入框和月份行容器
const monthInput = document.getElementById('monthInput');
const monthRows = document.getElementById('monthRows');
// 监听月份输入框的变化
monthInput.addEventListener('change', function () {
// 清空之前的月份行
monthRows.innerHTML = '';
// 获取选择的年月
const selectedMonth = monthInput.value;
if (!selectedMonth) return; // 如果未选择月份,直接返回
const [year, month] = selectedMonth.split('-');
const selectedYear = parseInt(year);
const selectedMonthNum = parseInt(month);
// 创建一个包含所有月份的数组
const allMonths = Array.from({ length: 12 }, (_, i) => i + 1);
// 遍历所有月份
allMonths.forEach(monthNum => {
// 查找与当前月份匹配的记录
const matchedRecord = records.find(record => {
const recordDateStr = record.日期.replace(/[年月号]/g, '-').replace(/-$/, ''); // 转换为 '2024-7-25' 格式
const recordDate = new Date(recordDateStr);
if (isNaN(recordDate.getTime())) {
console.error(`Invalid date: ${record.日期}`);
return false; // 如果日期无效,跳过该记录
}
const recordYear = recordDate.getFullYear();
const recordMonth = recordDate.getMonth() + 1; // getMonth() 返回 0-11,需要加1
return recordYear === selectedYear && recordMonth === monthNum;
});
// 创建新的行
const newRow = document.createElement('tr');
// 添加月份单元格
const monthCell = document.createElement('td');
monthCell.textContent = `${selectedYear}年${monthNum}月`;
newRow.appendChild(monthCell);
if (matchedRecord) {
// 添加房租单元格
const rentCell = document.createElement('td');
rentCell.textContent = `${matchedRecord.房租}元`;
newRow.appendChild(rentCell);
// 计算水费
const prevWaterRecord = records.find(record => {
const recordDateStr = record.日期.replace(/[年月号]/g, '-').replace(/-$/, ''); // 转换为 '2024-7-25' 格式
const recordDate = new Date(recordDateStr);
const recordYear = recordDate.getFullYear();
const recordMonth = recordDate.getMonth() + 1; // getMonth() 返回 0-11,需要加1
return recordYear === selectedYear && recordMonth === monthNum - 1;
});
const waterUsage = prevWaterRecord ? (matchedRecord.水 - prevWaterRecord.水) * 5 : 0; // 如果没有前一个记录,水费为0
const waterCell = document.createElement('td');
waterCell.textContent = `${matchedRecord.水} - ${prevWaterRecord ? prevWaterRecord.水 : matchedRecord.水} = ${prevWaterRecord ? matchedRecord.水 - prevWaterRecord.水 : 0} * 5 = ${waterUsage}元`;
newRow.appendChild(waterCell);
// 计算电费
const prevElectricRecord = records.find(record => {
const recordDateStr = record.日期.replace(/[年月号]/g, '-').replace(/-$/, ''); // 转换为 '2024-7-25' 格式
const recordDate = new Date(recordDateStr);
const recordYear = recordDate.getFullYear();
const recordMonth = recordDate.getMonth() + 1; // getMonth() 返回 0-11,需要加1
return recordYear === selectedYear && recordMonth === monthNum - 1;
});
const electricUsage = prevElectricRecord ? (matchedRecord.电 - prevElectricRecord.电) * 1 : 0; // 如果没有前一个记录,电费为0
const electricCell = document.createElement('td');
electricCell.textContent = `${matchedRecord.电} - ${prevElectricRecord ? prevElectricRecord.电 : matchedRecord.电} = ${prevElectricRecord ? matchedRecord.电 - prevElectricRecord.电 : 0} * 1 = ${electricUsage}元`;
newRow.appendChild(electricCell);
// 计算总和单元格
const totalCell = document.createElement('td');
const totalAmount = matchedRecord.房租 + waterUsage + electricUsage;
totalCell.textContent = `${totalAmount}元`;
newRow.appendChild(totalCell);
// 添加实缴单元格
const paidCell = document.createElement('td');
paidCell.textContent = `${matchedRecord.实缴}元`;
newRow.appendChild(paidCell);
// 添加备注单元格
const remarkCell = document.createElement('td');
remarkCell.textContent = matchedRecord.备注;
newRow.appendChild(remarkCell);
} else {
// 如果没有匹配的记录,显示默认值
const defaultCells = ['0元', '0元', '0元', '0元', '0元', '无'];
defaultCells.forEach(text => {
const cell = document.createElement('td');
cell.textContent = text;
newRow.appendChild(cell);
});
}
// 将新行添加到月份行容器中
monthRows.appendChild(newRow);
});
});
</script>
</html>
房租水电费记账本(内置数组数据版)
最新推荐文章于 2024-09-12 13:21:08 发布