<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>100kWh电池续航计算器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #f5f7fa;
padding: 20px;
line-height: 1.6;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #2d3748;
text-align: center;
margin-bottom: 25px;
font-size: 24px;
}
.input-section {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
color: #4a5568;
font-weight: 500;
}
input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 18px;
transition: border-color 0.3s;
}
input:focus {
outline: none;
border-color: #4299e1;
}
button {
width: 100%;
padding: 14px;
background-color: #4299e1;
color: white;
border: none;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
margin-bottom: 20px;
}
button:hover {
background-color: #3182ce;
}
.result-section {
background-color: #f8f9fa;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #4299e1;
display: none;
}
.result-section h2 {
color: #2d3748;
margin-bottom: 15px;
font-size: 20px;
}
.result-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e2e8f0;
}
.result-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.result-label {
color: #4a5568;
font-weight: 500;
}
.result-value {
color: #2d3748;
font-weight: 600;
}
.error-message {
color: #e53e3e;
margin-top: 8px;
font-size: 14px;
display: none;
}
.note {
margin-top: 20px;
color: #718096;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>📊 智界R7100kWh电池续航计算器</h1>
<div class="input-section">
<label for="availablePower">可用电量（百分比，如35表示35%）</label>
<input type="number" id="availablePower" step="0.1" min="0" max="100" placeholder="请输入可用电量">
<div class="error-message" id="errorMsgPower">输入错误！请输入0-100之间的数字</div>
</div>
<div class="input-section">
<label for="powerConsumption">电耗（kWh/100km，如15.22、17.84）</label>
<input type="number" id="powerConsumption" step="0.01" min="0.1" max="100" placeholder="请输入电耗" value="17.84">
<div class="error-message" id="errorMsgConsumption">输入错误！请输入0.1-100之间的数字</div>
</div>
<div class="input-section">
<label for="unitCost">电费单价（元/kWh，如1.3954）</label>
<input type="number" id="unitCost" step="0.0001" min="0.0001" max="100" placeholder="请输入电费单价" value="1.3954">
<div class="error-message" id="errorMsgCost">输入错误！请输入大于0的数字</div>
</div>
<button onclick="calculate()">开始计算</button>
<div class="result-section" id="resultSection">
<h2>计算结果</h2>
<div class="result-item">
<span class="result-label">可用电量：</span>
<span class="result-value" id="availablePowerResult"></span>
</div>
<div class="result-item">
<span class="result-label">预计续航：</span>
<span class="result-value" id="rangeResult"></span>
</div>
<div class="result-item">
<span class="result-label">需补充电量：</span>
<span class="result-value" id="supplementPowerResult"></span>
</div>
<div class="result-item">
<span class="result-label">需补充电量成本：</span>
<span class="result-value" id="costResult"></span>
</div>
</div>
<div class="note">
🔍 实际续航受路况、车速、空调使用等因素影响，需补充电量成本为从当前电量充至100%的费用，仅供参考，微信加bender2080
</div>
</div>
<script>
function calculate() {
// 核心参数
const BATTERY_CAPACITY = 100; // 电池总容量（kWh）
// 获取输入值
const availablePower = parseFloat(document.getElementById('availablePower').value);
const powerConsumption = parseFloat(document.getElementById('powerConsumption').value);
const unitCost = parseFloat(document.getElementById('unitCost').value);
// 获取错误提示元素
const errorMsgPower = document.getElementById('errorMsgPower');
const errorMsgConsumption = document.getElementById('errorMsgConsumption');
const errorMsgCost = document.getElementById('errorMsgCost');
const resultSection = document.getElementById('resultSection');
// 重置错误提示
errorMsgPower.style.display = 'none';
errorMsgConsumption.style.display = 'none';
errorMsgCost.style.display = 'none';
// 验证输入
let isValid = true;
if (isNaN(availablePower) || availablePower < 0 || availablePower > 100) {
errorMsgPower.style.display = 'block';
isValid = false;
}
if (isNaN(powerConsumption) || powerConsumption <= 0 || powerConsumption > 100) {
errorMsgConsumption.style.display = 'block';
isValid = false;
}
if (isNaN(unitCost) || unitCost <= 0 || unitCost > 100) {
errorMsgCost.style.display = 'block';
isValid = false;
}
if (!isValid) {
resultSection.style.display = 'none';
return;
}
// 核心计算
const availablePowerKwh = BATTERY_CAPACITY * (availablePower / 100); // 可用电量（kWh）
const drivingRange = (availablePowerKwh / powerConsumption) * 100; // 续航里程（km）
const supplementPowerKwh = BATTERY_CAPACITY - availablePowerKwh; // 需补充的电量（kWh）
const powerCost = supplementPowerKwh * unitCost; // 需补充电量的成本（元）
// 显示结果
document.getElementById('availablePowerResult').textContent = `${availablePower.toFixed(1)}%（${availablePowerKwh.toFixed(2)}度）`;
document.getElementById('rangeResult').textContent = `${drivingRange.toFixed(2)} 公里`;
document.getElementById('supplementPowerResult').textContent = `${(100 - availablePower).toFixed(1)}%（${supplementPowerKwh.toFixed(2)}度）`;
document.getElementById('costResult').textContent = `¥${powerCost.toFixed(2)}`;
resultSection.style.display = 'block';
// 滚动到结果区域
resultSection.scrollIntoView({ behavior: 'smooth' });
}
// 输入框回车触发计算
const inputElements = [
document.getElementById('availablePower'),
document.getElementById('powerConsumption'),
document.getElementById('unitCost')
];
inputElements.forEach(input => {
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
calculate();
}
});
});
</script>
</body>
</html>
index.html
index.html