html
复制代码
<!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');
// 拼接每一行数据到 content
content += `
<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>
