<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>房租水电费</title><script type="text/javascript">document.addEventListener('plusready', function () {//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")});</script><style>/* 全局样式 共享样式*/* {margin: 0;padding: 0;box-sizing: border-box;}/* position: sticky;固定 */caption,.date-row {position: sticky;top: 0;left: 0;width: 100%;z-index: 9999;background-color: #144756;}.date-column,.deposit,.rent,.total-amount,.water-electricity-usage,.water-electricity-fees,.remarks {border: 5px solid #333;margin: 0 10px;background-color: #28a745;color: white;border-radius: 10px;}/* 全局样式 共享样式 结束*/body {background-color: #0a1f19;color: #ffffff;text-shadow: 1px 1px 1px #000000;text-align: center;}.card-container {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2),0 0 1px 2px black,inset 0 2px 2px -2px white,inset 0 0 2px 9px #47434c,inset 0 0 2px 12px #f6ff00;border-radius: 5px;width: 100%;margin: 0 auto;min-width: 420px;max-width: 600px;padding: 10px;;}table {width: 100%;min-width: 380px;}/* 标题*/caption {font-size: 25px;background-color: #144756;}/* 主体 */.date-row,tbody {padding: 12px;border-radius: 30px;box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2),0 0 1px 2px black,inset 0 2px 2px -2px white,inset 0 0 2px 9px #47434c,inset 0 0 2px 10px #ff0000;}/* 日期行 */.date-row {top: 38px;z-index: 99;border-radius: 30px 30px 0 0px;}.date-column {display: flex;align-items: center;justify-content: space-evenly;background-color: #144756;margin: 0 10px;}/*日期标题 */.date {transform: scale(1);margin: -180px 10px 0px -95px;}.year {position: relative;top: 35px;left: 6px;padding: 15px 16px 25px 12px;border-radius: 10px 10px 0 0;color: rgb(234, 255, 0);background-color: #ff0000;}h1 {position: absolute;border: 5px solid #333;width: 135px;line-height: 115px;font-size: 60px;letter-spacing: -3px;-webkit-text-fill-color: transparent;border-radius: 20px 10px 10px 10px;box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);}.month1 {clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);text-shadow: 1px 1px 1px #d1ec04;-webkit-text-stroke: #fffbfb 1px;}.month2 {clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);transform: translateY(1px);z-index: 20;text-shadow: 1px 1px 1px #ff0303;-webkit-text-stroke: #ffffff 1px;}/*日期标题 结束*//* 公共样式 */.common-span {color: #ffff00;position: relative;border-radius: 3px;font-size: 30px;padding: 0 5px;font-weight: bold;box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.589), inset 2px 2px 3px rgba(0, 0, 0, 0.6);}.common-span::before {content: "";background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%,linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;width: 100%;height: 100%;position: absolute;top: 0;left: 0;border-radius: 5px;transform: scale(0.9);}.common-h2 {background-color: #28a7462e;color: white;border-radius: 0 0 2px 2px;}/* 水表 */.water-meter {width: 90px;height: 90px;margin: 0 10px;border-radius: 75px;background: #e0f7fa;border: 5px solid #0288d1;position: relative;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}.water-meter h2 {color: white;background: linear-gradient(to top, #0091ea, #00bcd4);border-radius: 0 0 75px 75px;}.water-meter p {animation: backgroundChange2 10s infinite;margin: 4px;font-size: 25px;font-weight: bold;padding: 0 7px 3px 5px;}/* 电表 */.electric-meter {border: 5px solid #333;border-radius: 10px;background: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}.electric-meter h2 {background-color: #28a745;color: white;border-radius: 0 0 2px 2px;}.electric-meter p {margin: 4px;font-size: 25px;font-weight: bold;padding: 0 7px 3px 5px;}/* 房租 */.rent {background: #f30000;margin: 0 0 0 10px;}/* 总金额 */.total-amount {background: #f30000;margin: 0 10px 0 0;}.total-amount b {color: #f3f3f3;}/* 水电量 */.water-electricity-usage {background-color: #144756;}/* 水电费 */.water-electricity-fees {background-color: #144756;}/* 备注 */.remarks {margin: 0 10px 10px 10px;border-radius: 0 0 30px 30px;}.remarks b {color: #ffff00;}/* 备注 结束 */.total-cost {background-color: #28a745;border-radius: 30px 30px 0 0;margin: 10px 10px 0 10px;padding-left: 50px;}.total-cost sub {background-color: #285ba79d;border-radius: 3px;}.center-text {text-align: center;}.water-meter p {animation: backgroundChange2 10s infinite;}.electric-meter p {animation: backgroundChange 10s infinite;}@keyframes backgroundChange2 {0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100% {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,inset 0 0 2px 22px #ff0000;color: #cfd601;border-radius: 33px 33px 0 0;}5%,15%,25%,35%,45%,55%,65%,75%,85%,95% {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,inset 0 0 2px 22px #f6ff00;color: #ffffff;border-radius: 30px 30px 0 0;}}@keyframes backgroundChange {0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100% {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,inset 0 0 2px 22px #ff0000;color: #cfd601;border-radius: 2px;}5%,15%,25%,35%,45%,55%,65%,75%,85%,95% {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,inset 0 0 2px 22px #f6ff00;color: #ffffff;border-radius: 5px;}}@media screen and (max-width: 600px) {.card-container {width: 100%;margin: 0px auto;transform: translateY(-25px) scale(0.95);}.date {transform: scale(1);margin: -115px 10px 0px -43px;}h1 {font-size: 40px;line-height: 80px;width: 140%;}}</style>
</head>
<body><div class="card-container"><table id="dataTable" class="table"></table></div>
</body>
<script>// 房租资料const rentRecords = [{"日期": "2024年9月30日","房租": 0, "水表": 71, "电表": 2600, "备注": "哔哩吧啦哔哩吧啦"},{"日期": "2024年8月25日","房租": 1500, "水表": 68, "电表": 2537, "备注": "3个月房租,8月25日-11月25日"},{"日期": "2024年7月25日","房租": 1000, "水表": 66, "电表": 2316, "备注": "房租500元,押金100元"}];// 计算函数function calcCosts(curr, prev) {const waterUsage = prev ? curr.水表 - prev.水表 : 0;const electricityUsage = prev ? curr.电表 - prev.电表 : 0;const waterFee = waterUsage > 0 ? waterUsage * 5 : 0; // 水费计算const electricityFee = electricityUsage > 0 ? electricityUsage * 1 : 0; // 电费计算const total = curr.房租 + waterFee + electricityFee; // 本月总金额计算return {waterUsage,electricityUsage,waterFee,electricityFee,total,waterUsageCalc: `${curr.水表} - ${prev ? prev.水表 : curr.水表} = ${waterUsage} `,electricityUsageCalc: `${curr.电表} - ${prev ? prev.电表 : curr.电表} = ${electricityUsage} `,waterFeeCalc: `${waterUsage} * 5 = ${waterFee}`,electricityFeeCalc: `${electricityUsage} * 1 = ${electricityFee}`,totalCalc: `${curr.房租} + ${waterFee} + ${electricityFee} = ${total}`,};}function renderData() {const sortedRentRecords = [...rentRecords].sort((a, b) => new Date(b.日期) - new Date(a.日期));let totalRent = 0, totalWaterFee = 0, totalElectricityFee = 0;const contentArea = document.getElementById('dataTable');let content = '';// 反向遍历for (let index = sortedRentRecords.length - 1; index >= 0; index--) {const record = sortedRentRecords[index];totalRent += record.房租; // 累加房租const prevRecord = index < sortedRentRecords.length - 1 ? sortedRentRecords[index + 1] : null; // 前一条记录const { waterUsage, electricityUsage, waterFee, electricityFee,waterUsageCalc, electricityUsageCalc, total,waterFeeCalc, electricityFeeCalc, totalCalc } = calcCosts(record, prevRecord);totalWaterFee += waterFee; // 累加水费totalElectricityFee += electricityFee; // 累加电费const month = String(parseInt(record.日期.substring(5, 7), 10)).padStart(2, '0');// 拼接每一行数据到 contentcontent += `<thead></thead><tbody><tr class="date-row"><td colspan="2"><div class="total-cost"><sub>总房租 ${totalRent}元</sub><sub>总水费 ${totalWaterFee}元</sub><sub>总电费 ${totalElectricityFee}元</sub><sub>总合计 ${totalRent + totalWaterFee + totalElectricityFee}元</sub></div><div class="date-column"><div class="date"><div class="year-month"><sub class="year">${record.日期.substring(0, 5)}</sub><h1 class="month1">${month}月</h1></div><h1 class="month2">${month}月</h1></div><div class="water-meter"><p>${record.水表}</p><h2>水表</h2></div><div class="electric-meter"><p>${record.电表}</p><h2>电表</h2></div></div></td></tr><tr class="rent-row"><td><div class="rent"><p>${record.房租}元/月</p><span class="common-span">${record.房租}元</span><h2 class="common-h2">房租</h2></div></td><td><div class="total-amount"><p>${totalCalc}</p><b class="common-span">${total}元</b><h2 class="common-h2">总金额</h2></div></td></tr><tr class="usage-row"><td><div class="water-electricity-usage"><h2 class="common-h2">水电量</h2><div class="water-electricity-usage-column"><div><p>水${waterUsageCalc}</p><span class="common-span">${waterUsage}吨</span></div><div><p>电${electricityUsageCalc}</p><span class="common-span">${electricityUsage}度</span></div></div></div></td><td><div class="water-electricity-fees"><h2 class="common-h2">水电费</h2><div class="water-electricity-usage-column"><div><p>水${waterFeeCalc}</p><span class="common-span">${waterFee}元</span></div><div><p>电${electricityFeeCalc}</p><span class="common-span">${electricityFee}元</span></div></div></div></td></tr><tr class="remarks-row"><td colspan="2"><div class="remarks"><b>备注:</b><span>${record.备注}</span></div></td></tr></tbody>`;}// 设置整个表格内容contentArea.innerHTML = `<caption><b>房租水电费记账本</b></caption>
<tfoot><tr><td class="center-text">到底了，没有更多了！</td></tr>
</tfoot><tbody>${content}</tbody>`;}renderData();
</script>
</html>
