以下是一个简单的电器电费计算器的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样式（颜色、布局等）
-
默认值（电价、每月天数等）
-
添加更多计算选项（如季节性电价差异）
希望这个计算器对你有帮助！
