507 lines
15 KiB
HTML
507 lines
15 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>电费计算器</title>
|
|
|
|
<style>
|
|
body {
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
margin: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
padding: 30px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
h1 {
|
|
color: #2c3e50;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.mode-selector {
|
|
margin-bottom: 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.mode-selector label {
|
|
display: inline-block;
|
|
margin-right: 15px;
|
|
font-weight: 500;
|
|
color: #34495e;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="radio"] {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
font-size: 16px;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
input[type="number"]:focus {
|
|
outline: none;
|
|
border-color: #3498db;
|
|
}
|
|
|
|
.price-inputs,
|
|
.time-inputs {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
button {
|
|
background-color: #3498db;
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
width: 100%;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #2980b9;
|
|
}
|
|
|
|
#results {
|
|
margin-top: 25px;
|
|
border-top: 2px solid #ecf0f1;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.result-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #ecf0f1;
|
|
}
|
|
|
|
.result-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.result-label {
|
|
font-weight: 500;
|
|
color: #34495e;
|
|
}
|
|
|
|
.result-value {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.peak-indicator {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.peak-hour {
|
|
background-color: #e74c3c;
|
|
}
|
|
|
|
.valley-hour {
|
|
background-color: #27ae60;
|
|
}
|
|
|
|
.separator {
|
|
text-align: center;
|
|
color: #7f8c8d;
|
|
margin: 15px 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
margin: 10px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.price-inputs,
|
|
.time-inputs {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>电费计算器</h1>
|
|
|
|
<div class="mode-selector">
|
|
<label>
|
|
<input
|
|
type="radio"
|
|
name="mode"
|
|
value="single"
|
|
checked
|
|
onchange="toggleMode()"
|
|
/>
|
|
单一电价模式
|
|
</label>
|
|
<label>
|
|
<input
|
|
type="radio"
|
|
name="mode"
|
|
value="peak"
|
|
onchange="toggleMode()"
|
|
/>
|
|
峰谷电价模式
|
|
</label>
|
|
</div>
|
|
|
|
<!-- 单一电价模式 -->
|
|
<div id="singlePriceMode">
|
|
<div class="form-group">
|
|
<label for="power">设备功耗 (瓦):</label>
|
|
<input type="number" id="power" value="100" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="hours">每日使用时长 (小时):</label>
|
|
<input type="number" id="hours" value="8" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="price">电价 (元/度):</label>
|
|
<input type="number" id="price" value="0.6" step="0.01" required />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 峰谷电价模式 -->
|
|
<div id="peakPriceMode" style="display: none">
|
|
<div class="form-group">
|
|
<label for="peakPower">设备功耗 (瓦):</label>
|
|
<input type="number" id="peakPower" value="100" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>峰谷时段设置</label>
|
|
<div class="time-inputs">
|
|
<div>
|
|
<label for="peakStart">高峰开始时间:</label>
|
|
<input type="number" id="peakStart" value="8" min="0" max="23" />
|
|
</div>
|
|
<div>
|
|
<label for="peakEnd">高峰结束时间:</label>
|
|
<input type="number" id="peakEnd" value="22" min="0" max="23" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>每日使用时长分布</label>
|
|
<div class="time-inputs">
|
|
<div>
|
|
<label for="peakHours">高峰时段使用 (小时):</label>
|
|
<input type="number" id="peakHours" value="14" min="0" max="24" />
|
|
</div>
|
|
<div>
|
|
<label for="valleyHours">低谷时段使用 (小时):</label>
|
|
<input
|
|
type="number"
|
|
id="valleyHours"
|
|
value="10"
|
|
min="0"
|
|
max="24"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>峰谷电价设置</label>
|
|
<div class="price-inputs">
|
|
<div>
|
|
<label for="peakPrice">
|
|
<span class="peak-indicator peak-hour"></span>高峰电价 (元/度):
|
|
</label>
|
|
<input
|
|
type="number"
|
|
id="peakPrice"
|
|
value="0.568"
|
|
step="0.01"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="valleyPrice">
|
|
<span class="peak-indicator valley-hour"></span>低谷电价
|
|
(元/度):
|
|
</label>
|
|
<input
|
|
type="number"
|
|
id="valleyPrice"
|
|
value="0.288"
|
|
step="0.01"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick="calculateCost()">计算</button>
|
|
|
|
<div id="results">
|
|
<div id="singleResults">
|
|
<h2>计算结果</h2>
|
|
<div class="result-item">
|
|
<span class="result-label">每日电费:</span>
|
|
<span class="result-value" id="dailyCost">0.00</span>
|
|
</div>
|
|
<div class="result-item">
|
|
<span class="result-label">每周电费:</span>
|
|
<span class="result-value" id="weeklyCost">0.00</span>
|
|
</div>
|
|
<div class="result-item">
|
|
<span class="result-label">每月电费:</span>
|
|
<span class="result-value" id="monthlyCost">0.00</span>
|
|
</div>
|
|
<div class="result-item">
|
|
<span class="result-label">每年电费:</span>
|
|
<span class="result-value" id="yearlyCost">0.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="peakResults" style="display: none">
|
|
<h2>峰谷电计算结果</h2>
|
|
<div class="result-item">
|
|
<span class="result-label">
|
|
<span class="peak-indicator peak-hour"></span>每日高峰电费:
|
|
</span>
|
|
<span class="result-value" id="dailyPeakCost">0.00</span>
|
|
</div>
|
|
<div class="result-item">
|
|
<span class="result-label">
|
|
<span class="peak-indicator valley-hour"></span>每日低谷电费:
|
|
</span>
|
|
<span class="result-value" id="dailyValleyCost">0.00</span>
|
|
</div>
|
|
<div class="separator">──</div>
|
|
<div class="result-item">
|
|
<span class="result-label">每日总电费:</span>
|
|
<span class="result-value" id="dailyTotalCost">0.00</span>
|
|
</div>
|
|
<div class="result-item">
|
|
<span class="result-label">每周电费:</span>
|
|
<span class="result-value" id="weeklyPeakCost">0.00</span>
|
|
</div>
|
|
<div class="result-item">
|
|
<span class="result-label">每月电费:</span>
|
|
<span class="result-value" id="monthlyPeakCost">0.00</span>
|
|
</div>
|
|
<div class="result-item">
|
|
<span class="result-label">每年电费:</span>
|
|
<span class="result-value" id="yearlyPeakCost">0.00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 页面加载时自动计算一次
|
|
document.addEventListener("DOMContentLoaded", calculateCost);
|
|
|
|
// 切换计算模式
|
|
function toggleMode() {
|
|
const mode = document.querySelector('input[name="mode"]:checked').value;
|
|
const singleMode = document.getElementById("singlePriceMode");
|
|
const peakMode = document.getElementById("peakPriceMode");
|
|
const singleResults = document.getElementById("singleResults");
|
|
const peakResults = document.getElementById("peakResults");
|
|
|
|
if (mode === "single") {
|
|
singleMode.style.display = "block";
|
|
peakMode.style.display = "none";
|
|
singleResults.style.display = "block";
|
|
peakResults.style.display = "none";
|
|
} else {
|
|
singleMode.style.display = "none";
|
|
peakMode.style.display = "block";
|
|
singleResults.style.display = "none";
|
|
peakResults.style.display = "block";
|
|
}
|
|
|
|
// 切换模式后自动计算
|
|
calculateCost();
|
|
}
|
|
|
|
function calculateCost() {
|
|
const mode = document.querySelector('input[name="mode"]:checked').value;
|
|
|
|
if (mode === "single") {
|
|
calculateSinglePrice();
|
|
} else {
|
|
calculatePeakPrice();
|
|
}
|
|
}
|
|
|
|
function calculateSinglePrice() {
|
|
// 获取输入值
|
|
let power = parseFloat(document.getElementById("power").value);
|
|
let hours = parseFloat(document.getElementById("hours").value);
|
|
let price = parseFloat(document.getElementById("price").value);
|
|
|
|
// 验证输入
|
|
if (isNaN(power) || isNaN(hours) || isNaN(price)) {
|
|
showError("请输入有效的数字。");
|
|
return;
|
|
}
|
|
|
|
// 计算电费
|
|
let dailyCost = (power / 1000) * hours * price; // 度 = (瓦/1000) * 小时
|
|
let weeklyCost = dailyCost * 7;
|
|
let monthlyCost = dailyCost * 30; // 简单假设每月 30 天
|
|
let yearlyCost = dailyCost * 365;
|
|
|
|
// 显示结果
|
|
document.getElementById("dailyCost").textContent = dailyCost.toFixed(2);
|
|
document.getElementById("weeklyCost").textContent =
|
|
weeklyCost.toFixed(2);
|
|
document.getElementById("monthlyCost").textContent =
|
|
monthlyCost.toFixed(2);
|
|
document.getElementById("yearlyCost").textContent =
|
|
yearlyCost.toFixed(2);
|
|
}
|
|
|
|
function calculatePeakPrice() {
|
|
// 获取输入值
|
|
let power = parseFloat(document.getElementById("peakPower").value);
|
|
let peakHours = parseFloat(document.getElementById("peakHours").value);
|
|
let valleyHours = parseFloat(
|
|
document.getElementById("valleyHours").value,
|
|
);
|
|
let peakPrice = parseFloat(document.getElementById("peakPrice").value);
|
|
let valleyPrice = parseFloat(
|
|
document.getElementById("valleyPrice").value,
|
|
);
|
|
|
|
// 验证输入
|
|
if (
|
|
isNaN(power) ||
|
|
isNaN(peakHours) ||
|
|
isNaN(valleyHours) ||
|
|
isNaN(peakPrice) ||
|
|
isNaN(valleyPrice)
|
|
) {
|
|
showError("请输入有效的数字。");
|
|
return;
|
|
}
|
|
|
|
// 验证时长总和
|
|
const totalHours = peakHours + valleyHours;
|
|
if (totalHours > 24) {
|
|
showError("高峰时段和低谷时段使用时长总和不能超过24小时。");
|
|
return;
|
|
}
|
|
|
|
// 验证时段设置
|
|
const peakStart = parseInt(document.getElementById("peakStart").value);
|
|
const peakEnd = parseInt(document.getElementById("peakEnd").value);
|
|
|
|
if (peakStart < 0 || peakStart > 23 || peakEnd < 0 || peakEnd > 23) {
|
|
showError("高峰时段时间必须在0-23之间。");
|
|
return;
|
|
}
|
|
|
|
// 计算高峰和低谷时段的日用电量
|
|
let dailyPeakKwh = (power / 1000) * peakHours;
|
|
let dailyValleyKwh = (power / 1000) * valleyHours;
|
|
|
|
// 计算每日电费
|
|
let dailyPeakCost = dailyPeakKwh * peakPrice;
|
|
let dailyValleyCost = dailyValleyKwh * valleyPrice;
|
|
let dailyTotalCost = dailyPeakCost + dailyValleyCost;
|
|
|
|
// 计算周期电费
|
|
let weeklyCost = dailyTotalCost * 7;
|
|
let monthlyCost = dailyTotalCost * 30;
|
|
let yearlyCost = dailyTotalCost * 365;
|
|
|
|
// 显示结果
|
|
document.getElementById("dailyPeakCost").textContent =
|
|
dailyPeakCost.toFixed(2);
|
|
document.getElementById("dailyValleyCost").textContent =
|
|
dailyValleyCost.toFixed(2);
|
|
document.getElementById("dailyTotalCost").textContent =
|
|
dailyTotalCost.toFixed(2);
|
|
document.getElementById("weeklyPeakCost").textContent =
|
|
weeklyCost.toFixed(2);
|
|
document.getElementById("monthlyPeakCost").textContent =
|
|
monthlyCost.toFixed(2);
|
|
document.getElementById("yearlyPeakCost").textContent =
|
|
yearlyCost.toFixed(2);
|
|
}
|
|
|
|
function showError(message) {
|
|
// 使用更友好的提示方式
|
|
const resultsDiv = document.getElementById("results");
|
|
const errorDiv = document.createElement("div");
|
|
errorDiv.style.cssText =
|
|
"background-color: #fee; border: 1px solid #fcc; color: #c00; padding: 10px; border-radius: 4px; margin-bottom: 15px;";
|
|
errorDiv.textContent = message;
|
|
|
|
// 移除之前的错误提示
|
|
const existingError = resultsDiv.querySelector(".error-message");
|
|
if (existingError) {
|
|
existingError.remove();
|
|
}
|
|
|
|
// 添加新的错误提示
|
|
errorDiv.className = "error-message";
|
|
resultsDiv.insertBefore(errorDiv, resultsDiv.firstChild);
|
|
|
|
// 3秒后自动移除错误提示
|
|
setTimeout(() => {
|
|
if (errorDiv.parentNode) {
|
|
errorDiv.remove();
|
|
}
|
|
}, 3000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|