How can I see the results in pesos ($ 0.00)?

Question

How can I see the results in pesos ($ 0.00)?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

When moving the Slider some results are shown, it is assumed that these results are prices, the idea is to show those numbers in pesos format, that is if the value is 240000, it should be seen: $ 240,000 and if the value is 1250000, You should see: $ 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>

javascript formato

asked by Carlos Andrés Pulido Campos 08.02.2018 в 18:46

source

2 answers

Vertical scroll by clicking on the background Bootstrap - Carousel height responsive but not dependent on content

score 1 · Answer 1

Use Intl.NumberFormat with properties

style = currency
currency = MXN or any currency you require.

If you want the amount without cents add the properties

minimumFractionDigits = 0
maximumFractionDigits = 0

Examples

With cents

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

No cents

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

score 0 · Answer 2

It generates a function to load the money mask.

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>