Comment puis-je faire un compte à rebours jQuery

Question

Je veux un compte à rebours jQuery:

1. Il commence à compter après la page de téléchargement se termine
2. Après le comptage de 0, elle redirige vers une url

Comment je peux faire?

Merci d'avance

Answer 1

J'ai pensé que je voudrais briser ce un peu et de fournir quelque chose qui ne la fois le compte à rebours, et de la redirection. Après tout, vous souhaitez peut-être compte à rebours et de manipuler le DOM au lieu demain. En tant que tel, je suis venu avec la suite de plugin jQuery que vous pouvez utiliser, et à l'étude:

// 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";
}

Jouer avec lui: http://jsfiddle.net/ystJ6/

Answer 2

J'ai créer un compte à rebours de script utilisant JQUERY, CSS et HTML. Voici mon code source complet. Le lien de démonstration également disponibles.

CSS de la Partie:

<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>

Jquery Partie:

<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>

Partie HTML:

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

Le Lien de démonstration: http://demos.coolajax.net/php/redirect

J'espère que ce code sera utile pour vous.

Answer 3

Etes-vous sûr que vous voulez utiliser Javascript pour cela? Vous pouvez simplement aller avec HTML:

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

Mis cela dans la tête et l'avant fonctionnera même sur les navigateurs sans Javascript.

Answer 4

Voici mon exemple basé hors de Jonathan Sampson exemple. Voici le jsfiddle lien. 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 5

Vous pouvez utiliser le jQuery animate fonction

// 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