Code pour simuler la perte de puissance d'une batterie en fonction de la température
Tout est dans le titre
5/19/20251 min read
<style>
.simulateur-container {
max-width: 650px;
margin: 2rem auto;
background: linear-gradient(145deg, #ffffff, #f0f4f8);
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
padding: 2rem;
font-family: 'Segoe UI', sans-serif;
color: #333;
}
.simulateur-container h2 {
text-align: center;
font-size: 1.8rem;
color: #003f7f;
margin-bottom: 1rem;
}
.simulateur-container p {
text-align: center;
font-size: 1rem;
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
input[type=range] {
width: 100%;
-webkit-appearance: none;
height: 10px;
background: #d1eaff;
border-radius: 5px;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #007bff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.simulateur-temperature {
text-align: center;
font-size: 1.2rem;
margin-top: 1rem;
font-weight: bold;
color: #0056b3;
}
.simulateur-result {
text-align: center;
margin-top: 1.5rem;
font-size: 2rem;
color: #c0392b;
font-weight: bold;
transition: all 0.3s ease;
}
.simulateur-credit {
margin-top: 2.5rem;
text-align: center;
font-size: 0.95rem;
color: #666;
}
.simulateur-credit a {
color: #003f7f;
font-weight: bold;
text-decoration: none;
transition: color 0.3s;
}
.simulateur-credit a:hover {
color: #007bff;
text-decoration: underline;
}
</style>
<div class="simulateur-container">
<h2>🔋 Simulateur de perte d'autonomie</h2>
<p>Estimez l’impact des températures extrêmes sur la batterie de votre voiture :</p>
<label for="temperature">Température extérieure (°C) :</label>
<input type="range" id="temperature" min="-30" max="50" value="20" oninput="updateSimulation()">
<div class="simulateur-temperature">
Température actuelle : <span id="tempValue">20</span>°C
</div>
<div class="simulateur-result">
Perte estimée : <span id="loss">0</span>%
</div>
<div class="simulateur-credit">
🔗 Outil développé avec soin par <a href="https://www.chanoine.fr" target="_blank" rel="noopener">chanoine.fr</a>
</div>
</div>
<script>
function updateSimulation() {
const temp = parseInt(document.getElementById("temperature").value);
document.getElementById("tempValue").textContent = temp;
let loss;
if (temp <= -20) loss = 50;
else if (temp <= -10) loss = 40;
else if (temp <= 0) loss = 30;
else if (temp <= 10) loss = 20;
else if (temp <= 25) loss = 0;
else if (temp <= 35) loss = 10;
else if (temp <= 45) loss = 20;
else loss = 30;
document.getElementById("loss").textContent = loss;
}
updateSimulation();
</script>