电费计算器
-
-
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
计算结果
-
每日电费: 元
-
每周电费: 元
-
每月电费: 元
-
每年电费: 元
+
+
计算结果
+
+ 每日电费:
+ 0.00
+
+
+ 每周电费:
+ 0.00
+
+
+ 每月电费:
+ 0.00
+
+
+ 每年电费:
+ 0.00
+
+
+
+
+
峰谷电计算结果
+
+
+ 每日高峰电费:
+
+ 0.00
+
+
+
+ 每日低谷电费:
+
+ 0.00
+
+
──
+
+ 每日总电费:
+ 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);
+ }