La tarea es mapear un rango de valores a otro rango de valores como mapear (0-100) a (100-10000000) en JavaScript. Hay dos enfoques que se analizan a continuación.
Enfoque 1: Use la escala logarítmica para mapear el rango. En este ejemplo, primero se calcula el valor logarítmico del rango y luego la escala se calcula usando la diferencia de los valores logarítmicos de la escala objetivo con la diferencia de la escala inicial. Luego usa la exponenciación para mapear el rango de un número en particular.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<body style="text-align:center;">
<h1>GeeksForGeeks</h1>
<p id="GFG_UP"></p>
<button onclick="myGFG()">
Click Here
</button>
<p id="GFG_DOWN"></p>
<script>
var up = document.getElementById("GFG_UP");
var val = 50;
up.innerHTML = "Click on the button to map"
+ " the value(0-100) to a range from "
+ "100 to 10, 000, 000<br> Val - " + val;
var down = document.getElementById("GFG_DOWN");
function Slider(pos) {
var minM = 0;
var maxM = 100;
var minV = Math.log(100);
var maxV = Math.log(10000000);
var scal = (maxV - minV) / (maxM - minM);
return Math.exp(minV + scal * (pos - minM));
}
function myGFG() {
down.innerHTML = "The value for "
+ val + " is " + Slider(val);
}
</script>
</body>
</html>
Producción:
Enfoque 2: este ejemplo también asigna el valor de un rango a otro pero usa una fórmula diferente.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<body style="text-align:center;">
<h1>GeeksForGeeks</h1>
<p id="GFG_UP"></p>
<button onclick="myGFG()">
Click Here
</button>
<p id="GFG_DOWN"></p>
<script>
var up = document.getElementById("GFG_UP");
var val = 50;
up.innerHTML = "Click on the button to map"
+ " the value(0-100) to a range from "
+ "100 to 10, 000, 000<br> Val - " + val;
var down = document.getElementById("GFG_DOWN");
function Slider(pos) {
return Math.floor(-900 + 1000 *
Math.exp(pos / 10.857255959));
}
function myGFG() {
down.innerHTML = "The value for "
+ val + " is " + Slider(val);
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA