first commit

2025-11-28 11:15:09 +08:00
commit a268c2d731
4 changed files with 1162 additions and 0 deletions
--- a/electricity_calculator.html
+++ b/electricity_calculator.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>电费计算器</title>
+
+    <style>
+      body {
+        font-family: sans-serif;
+        margin: 20px;
+      }
+
+      .container {
+        max-width: 600px;
+        margin: 0 auto;
+        padding: 20px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+      }
+
+      label {
+        display: block;
+        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 不会增加元素宽度 */
+      }
+
+      button {
+        background-color: #4caf50;
+        color: white;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+
+      button:hover {
+        background-color: #3e8e41;
+      }
+
+      #results {
+        margin-top: 20px;
+        border-top: 1px solid #ccc;
+        padding-top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>电费计算器</h1>
+
+      <label for="power">设备功耗 (瓦):</label>
+      <input type="number" id="power" placeholder="例如: 100" required />
+
+      <label for="hours">每日使用时长 (小时):</label>
+      <input type="number" id="hours" placeholder="例如: 8" required />
+
+      <label for="price">电价 (元/度):</label>
+      <input
+        type="number"
+        id="price"
+        placeholder="例如: 0.6"
+        step="0.01"
+        required
+      />
+
+      <button onclick="calculateCost()">计算</button>
+
+      <div id="results">
+        <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>
+    </div>
+
+    <script>
+      function calculateCost() {
+        // 获取输入值
+        let power = parseFloat(document.getElementById("power").value);
+        let hours = parseFloat(document.getElementById("hours").value);
+        let price = parseFloat(document.getElementById("price").value);
+
+        // 验证输入
+        if (isNaN(power) || isNaN(hours) || isNaN(price)) {
+          alert("请输入有效的数字。");
+          return;
+        }
+
+        // 计算电费
+        let dailyCost = (power / 1000) * hours * price; // 度 = (瓦/1000) * 小时
+        let weeklyCost = dailyCost * 7;
+        let monthlyCost = dailyCost * 30; // 简单假设每月 30 天
+        let yearlyCost = dailyCost * 365;
+
+        // 显示结果
+        document.getElementById("dailyCost").textContent = dailyCost.toFixed(2);
+        document.getElementById("weeklyCost").textContent =
+          weeklyCost.toFixed(2);
+        document.getElementById("monthlyCost").textContent =
+          monthlyCost.toFixed(2);
+        document.getElementById("yearlyCost").textContent =
+          yearlyCost.toFixed(2);
+      }
+    </script>
+  </body>
+</html>