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