Código de JavaScript - Incrementar un valor en un tiempo determinado

Pos: 1

Val: 3.506

Ha mantenido su posición en JavaScript (en relación al último mes)

Incrementar un valor en un tiempo determinado

JavaScript

(1)

Publicado el 8 de Abril del 2021 por Joel (150 códigos)

1.311 visualizaciones desde el 8 de Abril del 2021

Este código muestra como incrementar un valor, desde un valor inicial hasta un valor final con un intervalo dado, y en un tiempo determinado.

incrementar-valor-en-un-determinado-tiempo

incrementar-valor-en-un-determinado-tiempo

El elemento que se va a incrementar, tiene que tener el estilo "counter" y hay que definir:
data-from-value -> valor inicial
data-to-value -> valor final
data-increment -> valor de incremento
data-duration -> duración para llegar del valor inicial al valor final

Se muestra la manera de añadir el valor del Euro o porcentaje utilizando el estilo ::after

1
(1)

Publicado el 8 de Abril del 2021

gráfica de visualizaciones de la versión: 1

1.312 visualizaciones desde el 8 de Abril del 2021

<!DOCTYPE html>

<head>

    <style>

    .contador {

        font-size:30px;

    .counter {

        color:#E33838;

        font-family:sans-serif;

        font-weight: bold;

        font-size:69px

    .euro::after {

        content:'\20AC';

        margin-left:5px;

    .percent::after {

        content:'%';

        margin-left:5px;

    </style>

</head>

<body>

<div class='contador'>

    <span class="counter percent" data-from-value="0" data-to-value="100" data-increment="2" data-duration="1000"></span>

    1 segundo 0-100 incremento de 2

</div>

<div class='contador'>

    <span class="counter euro" data-from-value="0" data-to-value="100" data-increment="1" data-duration="2000"></span>

    2 segundos 0-100 incremento de 1

</div>

<div class='contador'>

    <span class="counter" data-from-value="0" data-to-value="100" data-increment="1" data-duration="3000"></span>

    3 segundos 0-100 incremento de 1

</div>

<div class='contador euro'>

    <span class="counter" data-from-value="0" data-to-value="1000" data-increment="100" data-duration="3000"></span>

    3 segundos 0-1000 incremento de 100

</div>

<script>

document.querySelectorAll(".counter").forEach(el => {

    // definimos la velocidad

    let speed=(el.dataset.duration/(el.dataset.toValue-el.dataset.fromValue))*(parseInt(el.dataset.increment) || 1);

    // mostramos el valor inicial

    el.innerHTML=el.dataset.fromValue;

    el.dataset.st=setInterval(el => {

        // incrementamos el valor actual

        let newValue=parseInt(el.innerHTML)+(parseInt(el.dataset.increment) || 1);

        el.innerHTML=newValue;

        if (newValue>=el.dataset.toValue) {

            // finalizamos el incremento

            el.innerHTML=el.dataset.toValue;

            clearInterval(el.dataset.st);

    }, speed, el);

});

</script>

</body>

Comentarios sobre la versión: 1 (1)

Alienpcmx

9 de Abril del 2021

muchas gracias Joel voy a revisar el texto

Responder

Comentar la versión: 1

http://lwp-l.com/s6999

Cambiar el color de fondo (background) cada vez que se carga la pagina

Convertir las urls de un texto en enlace HTML

Código de JavaScript - Incrementar un valor en un tiempo determinado

1(1)

Comentarios sobre la versión: 1 (1)

Comentar la versión: 1

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

1
(1)