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

以下是一个简单的电器电费计算器的HTML和CSS代码：

html 复制代码

<!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样式（颜色、布局等）
默认值（电价、每月天数等）
添加更多计算选项（如季节性电价差异）

希望这个计算器对你有帮助！