Time count down like www.bidhere.com_问答_开发者

开发者 https://www.devze.com 2023-01-25 19:48 出处：网络

Can anybody plea开发者_如何学运维se suggest to me how I can create a time countdown like www.bidhere.com.

相关专题：php

Can anybody plea开发者_如何学运维se suggest to me how I can create a time countdown like www.bidhere.com. what are the techniques used on that. e.g jQuery or cronjob ?

Thanks.

You can use javascript to achieve that affect

Markup

<body>
    <div id="countdown"></div>
</body>

Javascript

function countdown(remain) {
var countdown = document.getElementById("countdown"),
    timer = setInterval( function () {
        countdown.innerHTML = (remain%60 < 10 ? "0": "") + remain %60;
        if (--remain < 0 ) { clearInterval(timer); }
    },1000);
}


countdown(20);

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