0

tengo este contador que encontré en un sitio y funciona bien, pero no logro meter cada variable en una etiqueta.

también cree varios divs y con diferentes id, pero se duplica a medida que va pasando los segundos, y pues se hace una lista hacia abajo.

if ($("body").hasClass("home")) {
                var end = new Date('11/22/2019 4:00 PM');

                var _second = 1000;
                var _minute = _second * 60;
                var _hour = _minute * 60;
                var _day = _hour * 24;
                var timer;

                function showRemaining() {
                    var now = new Date();
                    var distance = end - now;
                    if (distance < 0) {

                        clearInterval(timer);
                        document.getElementById('countdown').innerHTML = 'EXPIRED!';

                        return;
                    }
                    var days = Math.floor(distance / _day);
                    var hours = Math.floor((distance % _day) / _hour);
                    var minutes = Math.floor((distance % _hour) / _minute);
                    var seconds = Math.floor((distance % _minute) / _second);


                    document.getElementById('countdown').innerHTML = + '<p>' + days + '</p>';
                    document.getElementById('countdown').innerHTML += '<p>' + hours + '</p>';
                    document.getElementById('countdown').innerHTML += '<p>' + minutes + '</p>';
                    document.getElementById('countdown').innerHTML += '<p>' + seconds + '</p>';
                }

                timer = setInterval(showRemaining, 1000);
            }

lo intente tambien asi, pero el salen varios "p" y la idea es que se mantenga en una sola etiqueta, es decir sin duplicarse

$('#countdown').append('<p>' + seconds + '</p>');

aqui llega el tiempo regresivo

<div id="countdown"></div>

2 respuestas 2

0

En base a lo que entendí, debes tomar en cuenta que estás utilizando apunta al body, por lo cual debes apuntar al div que tu quieres, en este caso al div con un id = "countdown", así $("#countdown"), te dejo el ejemplo:

if ($("#countdown").hasClass("home")) {
                var end = new Date('11/22/2019 4:00 PM');
                var _second = 1000;
                var _minute = _second * 60;
                var _hour = _minute * 60;
                var _day = _hour * 24;
                var timer;

                function showRemaining() {
                    var now = new Date();
                    var distance = end - now;
                    if (distance < 0) {

                        clearInterval(timer);
                        document.getElementById('countdown').innerHTML = 'EXPIRED!';

                        return;
                    }
                    var days = Math.floor(distance / _day);
                    var hours = Math.floor((distance % _day) / _hour);
                    var minutes = Math.floor((distance % _hour) / _minute);
                    var seconds = Math.floor((distance % _minute) / _second);


                    document.getElementById('countdown').innerHTML = + '<p>' + days + '</p>';
                    document.getElementById('countdown').innerHTML += '<p class="mBlue">' + hours + '</p>';
                    document.getElementById('countdown').innerHTML += '<p class="mYellow">' + minutes + '</p>';
                    document.getElementById('countdown').innerHTML += '<p class="mGreen">' + seconds + '</p>';
                }

                timer = setInterval(showRemaining, 1000);
            }
.mBlue{
  color: blue;
}
.mYellow{
  color: Yellow;
}
.mGreen{
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="countdown" class="home"></div>

Si no responde tu pregunta se más específico en lo que solicitas, así podremos ir modificando la respuesta.

Espero te ayude, saludos.

7
  • mmmm, el if es para que la funcion solo se ejecute en el home y no en alguna interna, es decir no tiene nada que ver el 22 nov. 2019 a las 19:07
  • lo que quiero es meter a days hours etc, dentro de una etiqueta, ya que salen en el DOM sin nada y asi no puedo meterle estilos el 22 nov. 2019 a las 19:08
  • no me queda claro, los valores están dentro del div con un id="countdown", por qué no podrías agregar estilos a esa etiqueta?.... o lo que deseas es que a cada uno de los número tenga sus estilos?... quieres que cada uno esté en un div distinto? el 22 nov. 2019 a las 19:21
  • que cada uno de los numeros tenga su div o etiqueta para darle estilos el 22 nov. 2019 a las 19:22
  • ¿Y si agregas directamente un llamado a una clase de estilos desde el InnerHtml?... Esto es lo que quieres?... te dejo el ejemplo. el 22 nov. 2019 a las 19:28
0

"use strict"

$(document).ready(function(){
        var end = new Date('11/30/2019 4:00 PM');

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.getElementById('countdown').innerHTML = 'EXPIRED!';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            $('#dias').html('<p>' + days + '</p>');
            $('#horas').html('<p>' + hours + '</p>');
            $('#minutos').html('<p>' + minutes + '</p>');
            $('#segundos').html('<p>' + seconds + '</p>');
        }

        timer = setInterval(showRemaining, 1000);

});
<!DOCTYPE html>
<html>
    <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
        <script src="./index.js"></script>
    </head>
    <body>
        <div id="dias" ></div>
        <div id="horas" ></div>
        <div id="minutos" ></div>
        <div id="segundos"></div>      
    </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.