22 lines
865 B
JavaScript
22 lines
865 B
JavaScript
// JavaScript
|
|
function updateGauge(value) {
|
|
const gaugeValue = document.getElementById('gaugeValue');
|
|
const gaugeText = document.getElementById('gaugeText');
|
|
const maxGaugeValue = 100; // Maximum value the gauge can display
|
|
const rotationDegree = ((value / maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90)
|
|
|
|
gaugeValue.style.transform = `rotate(${rotationDegree}deg)`;
|
|
gaugeText.textContent = value; // Update the text
|
|
|
|
// Change color based on value
|
|
if (value <= 40) {
|
|
gaugeValue.style.backgroundColor = 'green';
|
|
} else if (value <= 80) {
|
|
gaugeValue.style.backgroundColor = 'orange';
|
|
} else {
|
|
gaugeValue.style.backgroundColor = 'red';
|
|
}
|
|
}
|
|
|
|
// Example usage:
|
|
updateGauge(50); // Rotates the gauge to 0 degrees (50 out of 100), changes color to orange, and updates the text to "50"
|