以下是一個簡單的電器電費計算器的HTML和CSS代碼：
<!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>body {font-family: 'Arial', sans-serif;line-height: 1.6;color: #333;max-width: 600px;margin: 0 auto;padding: 20px;background-color: #f5f5f5;}h1 {color: #2c3e50;text-align: center;margin-bottom: 30px;}.calculator {background-color: white;border-radius: 8px;padding: 25px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.form-group {margin-bottom: 20px;}label {display: block;margin-bottom: 8px;font-weight: bold;}input[type="number"], input[type="text"] {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;box-sizing: border-box;font-size: 16px;}button {background-color: #3498db;color: white;border: none;padding: 12px 20px;border-radius: 4px;cursor: pointer;font-size: 16px;width: 100%;transition: background-color 0.3s;}button:hover {background-color: #2980b9;}.result {margin-top: 20px;padding: 15px;background-color: #e8f4fc;border-radius: 4px;display: none;}.result h3 {margin-top: 0;color: #2c3e50;}.result-value {font-size: 24px;font-weight: bold;color: #e74c3c;}.unit {font-size: 16px;color: #7f8c8d;}</style>
</head>
<body><h1>電器電費計算器</h1><div class="calculator"><div class="form-group"><label for="appliance">電器名稱</label><input type="text" id="appliance" placeholder="例如: 空調、冰箱等"></div><div class="form-group"><label for="power">電器功率 (瓦)</label><input type="number" id="power" placeholder="例如: 1500"></div><div class="form-group"><label for="hours">每天使用時間 (小時)</label><input type="number" id="hours" placeholder="例如: 8"></div><div class="form-group"><label for="days">每月使用天數</label><input type="number" id="days" placeholder="例如: 30" value="30"></div><div class="form-group"><label for="price">電價 (元/度)</label><input type="number" id="price" step="0.01" placeholder="例如: 0.6" value="0.6"></div><button onclick="calculate()">計算電費</button><div class="result" id="result"><h3>計算結果</h3><p><span id="appliance-name"></span>每月消耗約 <span class="result-value" id="consumption">0</span> <span class="unit">度電</span></p><p>每月電費約為 <span class="result-value" id="cost">0</span> <span class="unit">元</span></p></div></div><script>function calculate() {// 獲取輸入值const appliance = document.getElementById('appliance').value || "該電器";const power = parseFloat(document.getElementById('power').value);const hours = parseFloat(document.getElementById('hours').value);const days = parseFloat(document.getElementById('days').value);const price = parseFloat(document.getElementById('price').value);// 計算const consumption = (power * hours * days) / 1000; // 轉換為度const cost = consumption * price;// 顯示結果document.getElementById('appliance-name').textContent = appliance;document.getElementById('consumption').textContent = consumption.toFixed(2);document.getElementById('cost').textContent = cost.toFixed(2);// 顯示結果區域document.getElementById('result').style.display = 'block';}</script>
</body>
</html>功能說明
這個電費計算器具有以下功能：
-
輸入電器名稱（可選）
-
輸入電器功率（瓦）
-
輸入每天使用小時數
-
輸入每月使用天數（默認30天）
-
輸入電價（默認0.6元/度）
-
點擊計算按鈕后顯示：
-
每月用電量（度）
-
每月電費（元）
-
計算公式
電費計算的基本公式：
每月用電量(度) = 功率(W) × 每天使用小時 × 每月使用天數 ÷ 1000
每月電費(元) = 每月用電量 × 電價
自定義修改
你可以根據需要修改：
-
CSS樣式（顏色、布局等）
-
默認值（電價、每月天數等）
-
添加更多計算選項（如季節性電價差異）
希望這個計算器對你有幫助！
