update

2025-11-28 19:39:38 +08:00
parent 902f360f71
commit 23b9dae28b
1 changed files with 422 additions and 27 deletions
--- a/electricity_calculator.html
+++ b/electricity_calculator.html
@@ -7,47 +7,162 @@

    <style>
      body {
-        font-family: sans-serif;
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          "Helvetica Neue", Arial, sans-serif;
        margin: 20px;
      }

      .container {
-        max-width: 600px;
+        max-width: 700px;
        margin: 0 auto;
-        padding: 20px;
+        padding: 30px;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      h1 {
+        color: #2c3e50;
+        margin-bottom: 30px;
+        text-align: center;
+        font-size: 28px;
+        font-weight: 600;
+      }
+
+      .mode-selector {
+        margin-bottom: 25px;
+        text-align: center;
+      }
+
+      .mode-selector label {
+        display: inline-block;
+        margin-right: 15px;
+        font-weight: 500;
+        color: #34495e;
+      }
+
+      .form-group {
+        margin-bottom: 20px;
      }

      label {
        display: block;
+        margin-bottom: 8px;
+        font-weight: 500;
+        color: #2c3e50;
+      }
+
+      input[type="number"],
+      input[type="radio"] {
        margin-bottom: 5px;
      }

      input[type="number"] {
        width: 100%;
-        padding: 8px;
-        margin-bottom: 10px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        box-sizing: border-box; /* 确保 padding 不会增加元素宽度 */
+        padding: 12px;
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        box-sizing: border-box;
+        font-size: 16px;
+        transition: border-color 0.3s ease;
+      }
+
+      input[type="number"]:focus {
+        outline: none;
+        border-color: #3498db;
+      }
+
+      .price-inputs,
+      .time-inputs {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 15px;
      }

      button {
-        background-color: #4caf50;
+        background-color: #3498db;
        color: white;
-        padding: 10px 20px;
+        padding: 12px 24px;
        border: none;
-        border-radius: 4px;
+        border-radius: 8px;
        cursor: pointer;
+        font-size: 16px;
+        font-weight: 500;
+        width: 100%;
+        transition: background-color 0.3s ease;
      }

      button:hover {
-        background-color: #3e8e41;
+        background-color: #2980b9;
      }

      #results {
-        margin-top: 20px;
-        border-top: 1px solid #ccc;
-        padding-top: 10px;
+        margin-top: 25px;
+        border-top: 2px solid #ecf0f1;
+        padding-top: 20px;
+      }
+
+      .result-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 0;
+        border-bottom: 1px solid #ecf0f1;
+      }
+
+      .result-item:last-child {
+        border-bottom: none;
+      }
+
+      .result-label {
+        font-weight: 500;
+        color: #34495e;
+      }
+
+      .result-value {
+        font-size: 18px;
+        font-weight: 600;
+        color: #2c3e50;
+      }
+
+      .peak-indicator {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        margin-right: 6px;
+      }
+
+      .peak-hour {
+        background-color: #e74c3c;
+      }
+
+      .valley-hour {
+        background-color: #27ae60;
+      }
+
+      .separator {
+        text-align: center;
+        color: #7f8c8d;
+        margin: 15px 0;
+        font-weight: 500;
+      }
+
+      @media (max-width: 480px) {
+        .container {
+          margin: 10px;
+          padding: 20px;
+        }
+
+        .price-inputs,
+        .time-inputs {
+          grid-template-columns: 1fr;
+        }
+
+        h1 {
+          font-size: 24px;
+        }
      }
    </style>
  </head>
@@ -55,23 +170,174 @@
    <div class="container">
      <h1>电费计算器</h1>

+      <div class="mode-selector">
+        <label>
+          <input
+            type="radio"
+            name="mode"
+            value="single"
+            checked
+            onchange="toggleMode()"
+          />
+          单一电价模式
+        </label>
+        <label>
+          <input
+            type="radio"
+            name="mode"
+            value="peak"
+            onchange="toggleMode()"
+          />
+          峰谷电价模式
+        </label>
+      </div>
+
+      <!-- 单一电价模式 -->
+      <div id="singlePriceMode">
+        <div class="form-group">
          <label for="power">设备功耗 (瓦):</label>
          <input type="number" id="power" value="100" required />
+        </div>

+        <div class="form-group">
          <label for="hours">每日使用时长 (小时):</label>
          <input type="number" id="hours" value="8" required />
+        </div>

+        <div class="form-group">
          <label for="price">电价 (元/度):</label>
          <input type="number" id="price" value="0.6" step="0.01" required />
+        </div>
+      </div>
+
+      <!-- 峰谷电价模式 -->
+      <div id="peakPriceMode" style="display: none">
+        <div class="form-group">
+          <label for="peakPower">设备功耗 (瓦):</label>
+          <input type="number" id="peakPower" value="100" required />
+        </div>
+
+        <div class="form-group">
+          <label>峰谷时段设置</label>
+          <div class="time-inputs">
+            <div>
+              <label for="peakStart">高峰开始时间:</label>
+              <input type="number" id="peakStart" value="8" min="0" max="23" />
+            </div>
+            <div>
+              <label for="peakEnd">高峰结束时间:</label>
+              <input type="number" id="peakEnd" value="22" min="0" max="23" />
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label>每日使用时长分布</label>
+          <div class="time-inputs">
+            <div>
+              <label for="peakHours">高峰时段使用 (小时):</label>
+              <input type="number" id="peakHours" value="14" min="0" max="24" />
+            </div>
+            <div>
+              <label for="valleyHours">低谷时段使用 (小时):</label>
+              <input
+                type="number"
+                id="valleyHours"
+                value="10"
+                min="0"
+                max="24"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label>峰谷电价设置</label>
+          <div class="price-inputs">
+            <div>
+              <label for="peakPrice">
+                <span class="peak-indicator peak-hour"></span>高峰电价 (元/度):
+              </label>
+              <input
+                type="number"
+                id="peakPrice"
+                value="0.568"
+                step="0.01"
+                required
+              />
+            </div>
+            <div>
+              <label for="valleyPrice">
+                <span class="peak-indicator valley-hour"></span>低谷电价
+                (元/度):
+              </label>
+              <input
+                type="number"
+                id="valleyPrice"
+                value="0.288"
+                step="0.01"
+                required
+              />
+            </div>
+          </div>
+        </div>
+      </div>

      <button onclick="calculateCost()">计算</button>

      <div id="results">
+        <div id="singleResults">
          <h2>计算结果</h2>
-        <p>每日电费: <span id="dailyCost"></span> 元</p>
-        <p>每周电费: <span id="weeklyCost"></span> 元</p>
-        <p>每月电费: <span id="monthlyCost"></span> 元</p>
-        <p>每年电费: <span id="yearlyCost"></span> 元</p>
+          <div class="result-item">
+            <span class="result-label">每日电费:</span>
+            <span class="result-value" id="dailyCost">0.00</span>
+          </div>
+          <div class="result-item">
+            <span class="result-label">每周电费:</span>
+            <span class="result-value" id="weeklyCost">0.00</span>
+          </div>
+          <div class="result-item">
+            <span class="result-label">每月电费:</span>
+            <span class="result-value" id="monthlyCost">0.00</span>
+          </div>
+          <div class="result-item">
+            <span class="result-label">每年电费:</span>
+            <span class="result-value" id="yearlyCost">0.00</span>
+          </div>
+        </div>
+
+        <div id="peakResults" style="display: none">
+          <h2>峰谷电计算结果</h2>
+          <div class="result-item">
+            <span class="result-label">
+              <span class="peak-indicator peak-hour"></span>每日高峰电费:
+            </span>
+            <span class="result-value" id="dailyPeakCost">0.00</span>
+          </div>
+          <div class="result-item">
+            <span class="result-label">
+              <span class="peak-indicator valley-hour"></span>每日低谷电费:
+            </span>
+            <span class="result-value" id="dailyValleyCost">0.00</span>
+          </div>
+          <div class="separator">──</div>
+          <div class="result-item">
+            <span class="result-label">每日总电费:</span>
+            <span class="result-value" id="dailyTotalCost">0.00</span>
+          </div>
+          <div class="result-item">
+            <span class="result-label">每周电费:</span>
+            <span class="result-value" id="weeklyPeakCost">0.00</span>
+          </div>
+          <div class="result-item">
+            <span class="result-label">每月电费:</span>
+            <span class="result-value" id="monthlyPeakCost">0.00</span>
+          </div>
+          <div class="result-item">
+            <span class="result-label">每年电费:</span>
+            <span class="result-value" id="yearlyPeakCost">0.00</span>
+          </div>
+        </div>
      </div>
    </div>

@@ -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);
+      }
    </script>
  </body>
 </html>