Question

Can anybody please suggest to me how I can create a time countdown like http://www.bidhere.com.
what are the techniques used on that. e.g jQuery or cronjob ?

Thanks.

Answer 1

<span class="countdown" rel="30">0:30</span><br/>
<span class="countdown" rel="60">1:00</span><br/>
<span class="countdown" rel="1800">30:00</span><br/>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">

// Initialization
$(document).ready(function(){
    // Replace <span class="countdown"> rel content with the expiry epoch time
    var date = new Date(); // This gives you an epoch date in milliseconds
    $('span.countdown').each(function(){
            // We do rel*1000 to convert to milliseconds, cause rel is in seconds
        $(this).attr('rel', date.getTime()+parseInt($(this).attr('rel'))*1000);
    });

    // Set an interval so updateCountdown() is called every second
    setInterval('updateCountdown()', 1000);
});

// Update, called every second
function updateCountdown() {
    var date = new Date(); // This gives you an epoch date in milliseconds
    // For each <span class="countdown">
    $('span.countdown').each(function(){
        // Get time left in milliseconds 
        var timeLeft = parseInt($(this).attr('rel')) - date.getTime();

            // Convert from milliseconds to seconds
            timeLeft = Math.round(timeLeft/1000);

            // Set to 0 if negative
            if (timeLeft < 0) timeLeft = 0;

        // Extract minutes and seconds for display
        var secs = timeLeft % 60;
        var mins = (timeLeft-secs)/60;

        // Change <span> content
        $(this).text(mins+':'+(secs<10?'0':'')+secs);
    });
}
</script>