当前位置：首页 > news >正文

让 Deepseek 写电器电费计算器（html版本）

news 来源：原创 2025/6/15 7:02:29

以下是一个简单的电器电费计算器的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>