2017-08-22 5 views
1

J'ai ce compte à rebours et je veux animer les chiffres comme quand ils changent, le numéro de bascule ou une transition de fantaisie.Comment animer ce compte à rebours simple

<div>Registration closes in <span id="time">05:00</span> minutes!</div> 


function startTimer(duration, display) { 
var timer = duration, minutes, seconds; 
setInterval(function() { 
    minutes = parseInt(timer/60, 10) 
    seconds = parseInt(timer % 60, 10); 

    minutes = minutes < 10 ? "0" + minutes : minutes; 
    seconds = seconds < 10 ? "0" + seconds : seconds; 

    display.textContent = minutes + ":" + seconds; 

    if (--timer < 0) { 
     timer = duration; 
    } 
}, 1000); 
} 

window.onload = function() { 
var fiveMinutes = 60 * 5, 
    display = document.querySelector('#time'); 
startTimer(fiveMinutes, display); 
}; 

Je vous remercie de toute aide, merci

Répondre

0

Modification jquery

<div>Registration closes in <span id="time">05:00</span> minutes!</div> 
    $(window).load(function(){ 

     duration=60*5; 
     setInterval(function() { 
     minutes = parseInt(timer/60, 10) 
     seconds = parseInt(timer % 60, 10); 

     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 
     $('#display').animate({'opacity': 0}, 400, function(){ 
     $(this).html(minutes + ":" + seconds).animate({'opacity': 1}, 400);  
    });  
     if (--timer < 0) { 
      timer = duration; 
     } 
    }, 1000); 

    }); 
+0

merci, mais je veux cela en utilisant javascript –

+0

il existe certaines limites avec des fonctions enchaînant, il peut être mis en œuvre mais le code va complexe je pense –