From 23b9dae28bef8820eb345d8490c9577221bb83c3 Mon Sep 17 00:00:00 2001 From: gogongxt Date: Fri, 28 Nov 2025 19:39:38 +0800 Subject: [PATCH] update --- electricity_calculator.html | 449 +++++++++++++++++++++++++++++++++--- 1 file changed, 422 insertions(+), 27 deletions(-) diff --git a/electricity_calculator.html b/electricity_calculator.html index 69e898a..c2b839c 100644 --- a/electricity_calculator.html +++ b/electricity_calculator.html @@ -7,47 +7,162 @@ @@ -55,23 +170,174 @@

电费计算器

- - +
+ + +
- - + +
+
+ + +
- - +
+ + +
+ +
+ + +
+
+ + +
-

计算结果

-

每日电费: 元

-

每周电费: 元

-

每月电费: 元

-

每年电费: 元

+
+

计算结果

+
+ 每日电费: + 0.00 +
+
+ 每周电费: + 0.00 +
+
+ 每月电费: + 0.00 +
+
+ 每年电费: + 0.00 +
+
+ +
@@ -79,7 +345,41 @@ // 页面加载时自动计算一次 document.addEventListener("DOMContentLoaded", calculateCost); + // 切换计算模式 + function toggleMode() { + const mode = document.querySelector('input[name="mode"]:checked').value; + const singleMode = document.getElementById("singlePriceMode"); + const peakMode = document.getElementById("peakPriceMode"); + const singleResults = document.getElementById("singleResults"); + const peakResults = document.getElementById("peakResults"); + + if (mode === "single") { + singleMode.style.display = "block"; + peakMode.style.display = "none"; + singleResults.style.display = "block"; + peakResults.style.display = "none"; + } else { + singleMode.style.display = "none"; + peakMode.style.display = "block"; + singleResults.style.display = "none"; + peakResults.style.display = "block"; + } + + // 切换模式后自动计算 + calculateCost(); + } + function calculateCost() { + const mode = document.querySelector('input[name="mode"]:checked').value; + + if (mode === "single") { + calculateSinglePrice(); + } else { + calculatePeakPrice(); + } + } + + function calculateSinglePrice() { // 获取输入值 let power = parseFloat(document.getElementById("power").value); let hours = parseFloat(document.getElementById("hours").value); @@ -87,7 +387,7 @@ // 验证输入 if (isNaN(power) || isNaN(hours) || isNaN(price)) { - alert("请输入有效的数字。"); + showError("请输入有效的数字。"); return; } @@ -106,6 +406,101 @@ document.getElementById("yearlyCost").textContent = yearlyCost.toFixed(2); } + + function calculatePeakPrice() { + // 获取输入值 + let power = parseFloat(document.getElementById("peakPower").value); + let peakHours = parseFloat(document.getElementById("peakHours").value); + let valleyHours = parseFloat( + document.getElementById("valleyHours").value, + ); + let peakPrice = parseFloat(document.getElementById("peakPrice").value); + let valleyPrice = parseFloat( + document.getElementById("valleyPrice").value, + ); + + // 验证输入 + if ( + isNaN(power) || + isNaN(peakHours) || + isNaN(valleyHours) || + isNaN(peakPrice) || + isNaN(valleyPrice) + ) { + showError("请输入有效的数字。"); + return; + } + + // 验证时长总和 + const totalHours = peakHours + valleyHours; + if (totalHours > 24) { + showError("高峰时段和低谷时段使用时长总和不能超过24小时。"); + return; + } + + // 验证时段设置 + const peakStart = parseInt(document.getElementById("peakStart").value); + const peakEnd = parseInt(document.getElementById("peakEnd").value); + + if (peakStart < 0 || peakStart > 23 || peakEnd < 0 || peakEnd > 23) { + showError("高峰时段时间必须在0-23之间。"); + return; + } + + // 计算高峰和低谷时段的日用电量 + let dailyPeakKwh = (power / 1000) * peakHours; + let dailyValleyKwh = (power / 1000) * valleyHours; + + // 计算每日电费 + let dailyPeakCost = dailyPeakKwh * peakPrice; + let dailyValleyCost = dailyValleyKwh * valleyPrice; + let dailyTotalCost = dailyPeakCost + dailyValleyCost; + + // 计算周期电费 + let weeklyCost = dailyTotalCost * 7; + let monthlyCost = dailyTotalCost * 30; + let yearlyCost = dailyTotalCost * 365; + + // 显示结果 + document.getElementById("dailyPeakCost").textContent = + dailyPeakCost.toFixed(2); + document.getElementById("dailyValleyCost").textContent = + dailyValleyCost.toFixed(2); + document.getElementById("dailyTotalCost").textContent = + dailyTotalCost.toFixed(2); + document.getElementById("weeklyPeakCost").textContent = + weeklyCost.toFixed(2); + document.getElementById("monthlyPeakCost").textContent = + monthlyCost.toFixed(2); + document.getElementById("yearlyPeakCost").textContent = + yearlyCost.toFixed(2); + } + + function showError(message) { + // 使用更友好的提示方式 + const resultsDiv = document.getElementById("results"); + const errorDiv = document.createElement("div"); + errorDiv.style.cssText = + "background-color: #fee; border: 1px solid #fcc; color: #c00; padding: 10px; border-radius: 4px; margin-bottom: 15px;"; + errorDiv.textContent = message; + + // 移除之前的错误提示 + const existingError = resultsDiv.querySelector(".error-message"); + if (existingError) { + existingError.remove(); + } + + // 添加新的错误提示 + errorDiv.className = "error-message"; + resultsDiv.insertBefore(errorDiv, resultsDiv.firstChild); + + // 3秒后自动移除错误提示 + setTimeout(() => { + if (errorDiv.parentNode) { + errorDiv.remove(); + } + }, 3000); + }