0

no se manipular el lenguaje de JavaScript por eso esta petición de ayuda. mi idea es hacer una cuenta regresiva y que cuando finalice el tiempo, me muestre un div full pantalla, el cual no me permita poder seguir utilizando las funciones de la pagina que es un repositorio de archivos.

el código que encontré es el siguiente, pero ni idea de como hacer para agregarle ese div.

<div class="countdown">
Limited Time Only!
<span id="clock"></span>
</div>
<script>
$('#clock').countdown('2023/09/15 20:58:56')
.on('update.countdown', function(event) {
var format = '%H:%M:%S';
if(event.offset.totalDays > 0) {
format = '%-d day%!d ' + format;
}
if(event.offset.weeks > 0) {
format = '%-w week%!w ' + format;
}
$(this).html(event.strftime(format));
})
.on('finish.countdown', function(event) {
$(this).html('This offer has expired!')
.parent().addClass('disabled');
});           

Muchas gracias por su atención

2
  • full pantalla no se puede, solo cuando sea con intervencion del usuario
    – John
    Commented el 16 sept. 2023 a las 3:01
  • Cuando dices full pantalla lo que uno entiende es que quieres hacer algo como cuando presionas F11, y según lo que veo no es lo que quieres (¿o si?), me parece que lo tu quieres es que ocupe todo el viewport (que es la sección "útil" del navegador). Investiga sobre las unidades vh y vw de css
    – Yussef
    Commented el 16 sept. 2023 a las 3:36

1 respuesta 1

1

prueba de la siguiente manera:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body style="position: relative;">
    <div class="countdown">
        Limited Time Only!
        <span id="clock"></span>
    </div>
    <div id="mostrar" hidden style="width: 100%; height: 100vh; position: absolute; z-index: 1000000001; background-color: red; top:0;">

    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js" integrity="sha512-lteuRD+aUENrZPTXWFRPTBcDDxIGWe5uu0apPEn+3ZKYDwDaEErIK9rvR0QzUGmUQ55KFE2RqGTVoZsKctGMVw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $('#clock').countdown('2023/09/18 18:34:25')
            .on('update.countdown', function(event) {
                var format = '%H:%M:%S';
                if (event.offset.totalDays > 0) {
                    format = '%-d day%!d ' + format;
                }
                if (event.offset.weeks > 0) {
                    format = '%-w week%!w ' + format;
                }
                $(this).html(event.strftime(format));
            })
            .on('finish.countdown', function(event) {
                /*$(this).html('This offer has expired!')
                    .parent().addClass('disabled');*/
                $("#mostrar").removeAttr("hidden");
            });
    </script>
</body>

</html>

lo que hago aqui, es mostrar el div en posicion absoluta y sobre todos los demas elementos al momento de llegar el contador a 0

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.