房租水电费记账本(内置数组数据版)：添加了年总和

与妖为邻
于 2024-09-12 13:21:08 发布
阅读量136
点赞数
文章标签： javascript 开发语言 ecmascript
本文链接：https://blog.csdn.net/lulei5153/article/details/142172931
版权
<!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 colspan="2"> <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>
        <tfoot>
            <tr>
                <td><strong>总和</strong></td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>无</td>
            </tr>
        </tfoot>
    </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');
    const tfootCells = document.querySelectorAll('tfoot td');
    // 监听月份输入框的变化
    monthInput.addEventListener('change', function () {
        // 清空之前的月份行
        monthRows.innerHTML = '';
        // 初始化总和变量
        let totalRent = 0;
        let totalWater = 0;
        let totalElectric = 0;
        let totalAmount = 0;
        let totalPaid = 0;
        // 获取选择的年月
        const selectedMonth = monthInput.value;
        if (!selectedMonth) return; // 如果未选择月份，直接返回
        const [year, month] = selectedMonth.split('-');
        const selectedYear = parseInt(year);
        const selectedMonthNum = parseInt(month);
        console.log('Selected Month:', selectedMonth);
        console.log('Selected Year:', selectedYear);
        console.log('Selected Month Num:', selectedMonthNum);
        // 创建一个包含所有月份的数组
        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;
            });
            console.log('Matched Record:', matchedRecord);
            // 创建新的行
            const newRow = document.createElement('tr');
            // 添加月份单元格
            const monthCell = document.createElement('td');
            monthCell.textContent = `${monthNum}月`; // 不显示年份
            newRow.appendChild(monthCell);
            if (matchedRecord) {
                // 添加房租单元格
                const rentCell = document.createElement('td');
                rentCell.textContent = `${matchedRecord.房租}元`;
                newRow.appendChild(rentCell);
                totalRent += matchedRecord.房租;
                // 计算水费
                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);
                totalWater += waterUsage;
                // 计算电费
                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);
                totalElectric += electricUsage;
                // 计算总和单元格
                const totalCell = document.createElement('td');
                let totalAmountForMonth = matchedRecord.房租 + waterUsage + electricUsage;
                totalCell.textContent = `房租: ${matchedRecord.房租}元 + 水费: ${waterUsage}元 + 电费: ${electricUsage}元 = ${totalAmountForMonth}元`; // 显示计算过程
                newRow.appendChild(totalCell);
                totalAmount += totalAmountForMonth; // 累加到总和
                // 添加实缴单元格
                const paidCell = document.createElement('td');
                paidCell.textContent = `${matchedRecord.实缴}元`;
                newRow.appendChild(paidCell);
                totalPaid += matchedRecord.实缴;
                // 添加备注单元格
                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);
        });
        // 更新总和单元格
        tfootCells[1].textContent = `${totalRent}元`;
        tfootCells[2].textContent = `${totalWater}元`;
        tfootCells[3].textContent = `${totalElectric}元`;
        tfootCells[4].textContent = `${totalAmount}元`;
        tfootCells[5].textContent = `${totalPaid}元`;
    });
</script>

</html>