<!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>* {margin: 0;padding: 0;box-sizing: border-box;}body {background-color: #0a1f19;color: #ffffff;text-shadow: 1px 1px 1px #000000;text-align: center;}.meter-row,.date-row {width: 100%;margin: 20px auto;min-width: 420px;max-width: 600px;border-radius: 30px 30px 0 0px;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;}.meter-row {display: flex;}.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;}.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;}}.remarks,.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;}/* 备注 */.remarks {border-radius: 0 0 30px 30px;}.remarks b {color: #ffff00;}/* 备注 结束 *//* 下面的电表 */.meter {width: 300px;height: 150px;border: 5px solid #333;border-radius: 10px;background: linear-gradient(to bottom, #fff, #e6e6e6);box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);position: relative;text-align: center;font-family: 'Arial', sans-serif;}.meter .dial {width: 80%;height: 80%;border: 3px solid #333;border-radius: 50%;position: absolute;top: 10%;left: 10%;display: flex;justify-content: center;align-items: center;}.needle {width: 2px;height: 40%;background: red;position: absolute;bottom: 50%;transform-origin: bottom;transition: transform 0.5s ease-out;}.reading {font-size: 24px;margin-top: 20px;}.button {padding: 10px 20px;margin-top: 20px;background-color: #28a745;color: white;border: none;border-radius: 5px;cursor: pointer;}.button:hover {background-color: #218838;}.water-meter2 {width: 150px;height: 150px;border-radius: 75px;background: #e0f7fa;border: 10px solid #0288d1;position: relative;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}.water-level {position: absolute;bottom: -10px;left: 0%;width: 100%;background: linear-gradient(to top, #0091ea, #079aad);border-radius: 0 0 75px 75px;transition: height 0.3s ease;height: 0;animation: wave 1s infinite ease-in-out;}@keyframes wave {0% {background-position: 0% 0%;}100% {background-position: 100% 20%;}}.indicator {position: absolute;width: 10px;height: 10px;background: red;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 10;}/* 添加波浪效果背景 */.water-level {position: absolute;bottom: -10px;left: 0%;width: 100%;background: linear-gradient(to top, #00bcd4, #00695c);/* 修改了颜色 */border-radius: 0 0 75px 75px;transition: height 0.3s ease;height: 0;animation: wave 1s infinite ease-in-out;background-size: 20% 20%;/* 背景大小用于波动效果 */}</style>
</head>
<body><div class="date-row"><div class="total-cost"><sub>总房租0元</sub><sub>总水费 0元</sub><sub>总电费0元</sub><sub>总合计 0元</sub></div><div class="date-column"><div class="date"><div class="year-month"><sub class="year">2024年</sub><h1 class="month1">10月</h1></div><h1 class="month2">10月</h1></div><div class="water-meter"><p>71</p><h2>水表</h2></div><div class="electric-meter"><p class="common-span">2600</p><h2>电表</h2></div></div><div class="remarks"><b>备注:</b><span>哔哩吧啦哔哩吧啦</span></div></div><div class="meter-row"><div class="meter"><div class="dial"><div class="needle" id="needle"></div></div><div class="reading" id="reading">0 kWh</div></div><div class="meter"><div class="reading" id="meterReading">0 kWh</div><button class="button" onclick="increaseReading()">增加用电量</button></div><div class="water-meter2"><div class="water-level" style="height: 60%; animation: wave 1s infinite ease-in-out;"><span></span></div><div class="indicator"></div></div></div>
</body>
<script>const needle = document.getElementById('needle');const reading = document.getElementById('reading');// 随机生成电表读数function updateMeter() {const value = Math.floor(Math.random() * 100); // 0-99 kWhconst angle = (value / 100) * 180; // 转换为角度 (0-180度)needle.style.transform = `rotate(${-90 + angle}deg)`; // 调整方向reading.innerText = `${value} kWh`; // 更新读数}// 每隔2秒更新一次读数setInterval(updateMeter, 2000);let currentReading = 0;function increaseReading() {currentReading += Math.floor(Math.random() * 10) + 1; // 随机增加1到10之间的用电量document.getElementById('meterReading').innerText = currentReading + ' kWh';}
</script>
</html>