jquery - dias - timer javascript

¿Cómo puedo hacer una cuenta atrás de jQuery?

Question

Quiero una cuenta atrás de jQuery:

1. Comienza a contar después de finalizar la descarga de la página
2. Después de contar hasta 0 redirige a una URL

¿Cómo puedo hacer eso?

Answer 1

¿Estás seguro, quieres usar Javascript para esto? Puede ir con HTML simple:

<meta http-equiv="refresh" content="NUMBER_OF_SECONDS_TO_WAIT; URL=http://REDIRECT_URL/">

Coloque esto en el encabezado y el reenvío incluso funcionará en navegadores sin Javascript habilitado.

Answer 2

Aquí está mi ejemplo basado en el ejemplo de Jonathan Sampson. Aquí está el enlace jsfiddle. http://jsfiddle.net/njELV/1/

jQuery:

var countdown = {
    startInterval : function() {
        var count = 1800; // 30 minute timeout
        var currentId = setInterval(function(){
            $(''#currentSeconds'').html(count);
            if(count == 30) { // when there''s thirty seconds...
                $(''#expireDiv'').slideDown().click(function() {
                        clearInterval(countdown.intervalId);
                        $(''#expireDiv'').slideUp();                      
                        window.location.reload();
                        //or whatever you''d like to do when someone clicks on the div (refresh your session etc).
                });
            }
            if (count == 0) {
                window.location.href = ''/logout.php'';
            }
            --count;
        }, 1000);
        countdown.intervalId = currentId;
    }
};
countdown.startInterval();

/*
Then each time an ajax call is made to fetch a page
*/
if(typeof countdown.oldIntervalId != ''undefined'') {
        countdown.oldIntervalId = countdown.intervalId;
        clearInterval(countdown.oldIntervalId);
        countdown.startInterval();
        $(''#expireDiv'').slideUp();
    } else {
        countdown.oldIntervalId = 0;
    }

CSS:

#expireDiv {
    width: 100%;
    text-align: center;
    background-color: #63AFD0;
    padding: 10px;
    margin: 0;
    border: 1px solid #024A68;
    color: #024A68;
    font-weight: bold;
    font-size: 125%;
    box-shadow: -1px -1px 5px 1px #5E8C9E inset;
    -moz-box-shadow: -1px -1px 5px 1px #5E8C9E inset;
    -webkit-box-shadow: -1px -1px 5px 1px #5E8C9E inset;
    display:none;
    cursor: pointer;
}

HTML:

<div id="expireDiv">
    Your session is about to expire. You will be logged out in <span id="currentSeconds"></span> seconds. If you want to continue, please save your work and click <u>here</u> to refresh the page.
</div>

Answer 3

En el ejemplo del código de Himel Khan publicado anteriormente, cambié

if(updateTime == 0)

a

if(updateTime <= 0)

solo en caso de que alguien presione el botón Atrás después de haber sido redirigido. De lo contrario, comenzará en números negativos y nunca volverá a redirigirse.

Es importante tener en cuenta que no se debe vincular el código en la página de destino con este cambio o se actualizará en bucle. Si realiza este cambio, solo incluya el script en la página con la cuenta regresiva.

Supongo que hay una mejor manera de lograr esta solución, así que tal vez alguien más podría agregar una mejor solución

Gracias por el codigo.

Answer 4

He creado una secuencia de comandos de cuenta atrás usando JQUERY, CSS y HTML. Aquí está mi código fuente completo. Enlace demo también disponible.

Pieza CSS:

<style type="text/css">
    body{ font-family: verdana; font-size:12px; }
    a{text-decoration: none;color:blue;font-weight: bold;}
    a:hover{color: gray;font-weight: bold;}
    div#my-timer{width: 400px;background: lightblue; margin:  0 auto;text-align: center;padding:5px 0px 5px 0px;}
</style>

Parte Jquery:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        var settimmer = 0;
        $(function(){
                window.setInterval(function() {
                    var timeCounter = $("b[id=show-time]").html();
                    var updateTime = eval(timeCounter)- eval(1);
                    $("b[id=show-time]").html(updateTime);

                    if(updateTime == 0){
                        window.location = ("redirect.php");
                    }
                }, 1000);

        });
    </script>

Parte de HTML:

<div id="my-timer">
        Page Will Redirect with in <b id="show-time">10</b> seconds        
</div>

Enlace demo: http://demos.coolajax.net/php/redirect

Espero que este código sea útil para ti.

Answer 5

Pensé que rompería esto un poco y proporcionaría algo que incluye tanto la cuenta regresiva como la redirección. Después de todo, es posible que desee volver a contar y manipular el DOM en lugar de mañana. Como tal, he creado el siguiente complemento de jQuery que puede usar y estudiar:

// Our countdown plugin takes a callback, a duration, and an optional message
$.fn.countdown = function (callback, duration, message) {
    // If no message is provided, we use an empty string
    message = message || "";
    // Get reference to container, and set initial content
    var container = $(this[0]).html(duration + message);
    // Get reference to the interval doing the countdown
    var countdown = setInterval(function () {
        // If seconds remain
        if (--duration) {
            // Update our container''s message
            container.html(duration + message);
        // Otherwise
        } else {
            // Clear the countdown interval
            clearInterval(countdown);
            // And fire the callback passing our container as `this`
            callback.call(container);   
        }
    // Run interval every 1000ms (1 second)
    }, 1000);

};

// Use p.countdown as container, pass redirect, duration, and optional message
$(".countdown").countdown(redirect, 5, "s remaining");

// Function to be called after 5 seconds
function redirect () {
    this.html("Done counting, redirecting.");
    window.location = "http://msdn.microsoft.com";
}

Answer 6

Puede usar la función de animación jQuery

// Enter num from and to
$({countNum: 8000}).animate({countNum: 0}, {
  duration: 8000,
  easing:''linear'',
  step: function() {
    // What todo on every count
    console.log(Math.floor(this.countNum));
  },
  complete: function() {
    console.log(''finished'');
  }
});

http://jsbin.com/upazas/1/edit

Answer 7

Tengo esta solución simple sin jquery :

<script>
    sec = 10;
    counter = document.getElementById(''counter'');
    counter.innerText = sec;
    i = setInterval(function(){
        --sec;

        if (sec === 1){
            clearInterval(i);
            window.location = document.getElementById(''retry'').href;
        }
        counter.innerText=sec;
        },1000);
    </script>

En el ejemplo anterior, la URL de redirección se extrae del atributo href de un hipervínculo en el documento, que puede reemplazar con cualquier valor que desee.

Mira esta DEMO

Answer 8

este enlace útil Cuenta atrás jQuery admite todo el lenguaje

sólo:)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript">
      $(''#mySelector'').countdown({since: new Date(2010, 12-1, 25)});
</script>

Answer 9

puedes usar esto

<div id="counter"></div>

<script type="text/javascript" src="http://yourjavascript.com/88131111995/jquery.countdown.js"></script>

    $(document).ready(function () {
     $(''#counter'').countdown({
        until: 5,
        compact: true,
        onExpiry: function() { alert(''bye!!''); }
      });
   });