2017-08-22 35 views
1

我有這個倒計時,我想動畫的數字就像他們改變時,數字翻轉或一些幻想的過渡。如何動畫這個簡單的倒計時

<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); 
}; 

我想感謝所有幫助,三江源

回答

0

更改爲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

感謝,但我想這個使用JavaScript –

+0

存在一些侷限性鏈接功能,它可以實現,但代碼我認爲複雜 –