0

Al mover el Slider se muestran unos resultados, se supone que esos resultados son precios, la idea es mostrar esos números con formato pesos, es decir si el valor son 240000, se debe ver: $240.000 y si el valor es 1250000, se debe ver: $1.250.000

window.addEventListener('load', main, false);

function main() {
    var n1 = document.querySelector('#num1');
    var n2 = document.querySelector('#num2');
    var n3 = document.querySelector('#num3');
    var c1 = document.querySelector('#cant1');
    var c2 = document.querySelector('#cant2');
    var c3 = document.querySelector('#cant3');
    var v1 = document.querySelector('#val1');
    var v2 = document.querySelector('#val2');
    var v3 = document.querySelector('#val3');
    var totc = document.querySelector('#totalc');
    var totv = document.querySelector('#totalv');
    var tota = document.querySelector('#totart');
    
    var handler = function() {
        
        var a, b, c, x;
        a = ~~n1.value;
        b = ~~n2.value;
        c = ~~n3.value;
        c1.innerHTML = a;
        c2.innerHTML = b;
        c3.innerHTML = c;
        v1.innerHTML = a * 8500;
        v2.innerHTML = b * 20400;
        v3.innerHTML = c * 42500;
        totc.innerHTML = a + b + c;
        totv.innerHTML = (a * 8500) + (b * 20400) + (c * 42500);
        
    };
    
        
    
    /// Se puede omitir el `mousemove` pero le da un efecto
    /// de ejecucion en `tiempo real` bastante interesante
    n1.addEventListener('change', handler, false);
    n1.addEventListener('mousemove', handler, false);

    n2.addEventListener('change', handler, false);
    n2.addEventListener('mousemove', handler, false);

    n3.addEventListener('change', handler, false);
    n3.addEventListener('mousemove', handler, false);
}
.slider {
    -webkit-appearance: none;
    width: 30%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(0,0,0,1);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(0,0,0,1);
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="iconos/css/fontawesome.css">
    <link rel=stylesheet href="css/estilos.css" type="text/css"/>
    <meta name="viewport" content="width=device-width, user-sclable=no, initial-scale=1.0, minimun-scale=1.0">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="javascript/codigo.js"></script>
    
</head>
<body>
    <input type="range" id="num1" class="slider" min="0" max="90" value="0">
    <span> Cantidad #1: <span id="cant1">0</span> <span> valor #1: <span id="val1">0</span> </span><br><br>

    <input type="range" id="num2" class="slider" min="0" max="90" value="0">
        <span> Cantidad #2: <span id="cant2">0</span></span> <span> valor #2: <span id="val2">0</span> </span><br><br>

    <input type="range" id="num3" class="slider" min="0" max="90" value="0">
    <span> Cantidad #3: <span id="cant3">0</span></span> <span> valor #3: <span id="val3">0</span> </span><br><br>

    <span> Cantidad Total: <span id="totalc">0</span></span> </span> <span> valor total: <span id="totalv">0</span> </span><br><br>
</body>
</html>

2
  • 1
    ¿Y con los centavos? Por cierto, en vez de publicar todo tu código, conviene que lo reduzcas a un ejemplo mínimo verificable
    – Mariano
    el 9 feb. 2018 a las 0:14
  • En el título se incluye centavos y el punto como separador decimal, pero en el cuerpo de la pregunta no se incluyen centavos y se usa punto como separador de millares y millones. Por favor aclara la moneda en la que requieres el resultado.
    – Rubén
    el 9 feb. 2018 a las 2:53

2 respuestas 2

3

Usa Intl.NumberFormat con las propiedades

  • style = currency
  • currency = MXN o alguna la moneda que requieras.

Si deseas la cantidad sin centavos agrega las propiedades

  • minimumFractionDigits = 0
  • maximumFractionDigits = 0

Ejemplos

Con centavos

var monto = 1000
console.info(Intl.NumberFormat('es-MX',{style:'currency',currency:'MXN'}).format(monto));

Sin centavos

var monto = 1000
console.info(Intl.NumberFormat('es-MX',{style:'currency',currency:'MXN',minimumFractionDigits:0,maximumFractionDigits:0}).format(monto));

0
0

Genera un función para cargar la mascara de dinero.

window.addEventListener('load', main, false);

function main() {
    var n1 = document.querySelector('#num1');
    var n2 = document.querySelector('#num2');
    var n3 = document.querySelector('#num3');
    var c1 = document.querySelector('#cant1');
    var c2 = document.querySelector('#cant2');
    var c3 = document.querySelector('#cant3');
    var v1 = document.querySelector('#val1');
    var v2 = document.querySelector('#val2');
    var v3 = document.querySelector('#val3');
    var totc = document.querySelector('#totalc');
    var totv = document.querySelector('#totalv');
    var tota = document.querySelector('#totart');
    
    var handler = function() {
        
        var a, b, c, x;
        a = ~~n1.value;
        b = ~~n2.value;
        c = ~~n3.value;
        c1.innerHTML = a;
        c2.innerHTML = b;
        c3.innerHTML = c;
        v1.innerHTML = a * 8500;
        v2.innerHTML = b * 20400;
        v3.innerHTML = c * 42500;
        totc.innerHTML = maskDinero( a + b + c);
        totv.innerHTML = maskDinero( (a * 8500) + (b * 20400) + (c * 42500));
        
    };
    
        
    
    /// Se puede omitir el `mousemove` pero le da un efecto
    /// de ejecucion en `tiempo real` bastante interesante
    n1.addEventListener('change', handler, false);
    n1.addEventListener('mousemove', handler, false);

    n2.addEventListener('change', handler, false);
    n2.addEventListener('mousemove', handler, false);

    n3.addEventListener('change', handler, false);
    n3.addEventListener('mousemove', handler, false);
}

function maskDinero(numero) {
            return "$" + parseFloat(numero).toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
        }
.slider {
    -webkit-appearance: none;
    width: 30%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(0,0,0,1);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(0,0,0,1);
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="iconos/css/fontawesome.css">
    <link rel=stylesheet href="css/estilos.css" type="text/css"/>
    <meta name="viewport" content="width=device-width, user-sclable=no, initial-scale=1.0, minimun-scale=1.0">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="javascript/codigo.js"></script>
    
</head>
<body>
    <input type="range" id="num1" class="slider" min="0" max="90" value="0">
    <span> Cantidad #1: <span id="cant1">0</span> <span> valor #1: <span id="val1">0</span> </span><br><br>

    <input type="range" id="num2" class="slider" min="0" max="90" value="0">
        <span> Cantidad #2: <span id="cant2">0</span></span> <span> valor #2: <span id="val2">0</span> </span><br><br>

    <input type="range" id="num3" class="slider" min="0" max="90" value="0">
    <span> Cantidad #3: <span id="cant3">0</span></span> <span> valor #3: <span id="val3">0</span> </span><br><br>

    <span> Cantidad Total: <span id="totalc">0</span></span> </span> <span> valor total: <span id="totalv">0</span> </span><br><br>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.