时间倒计时如www.bidhere.com

时间:2010-11-19 19:24:33

标签: php

有人可以告诉我如何创建像www.bidhere.com这样的倒计时时间。 使用的技术是什么?例如jQuery还是cronjob?

感谢。

2 个答案:

答案 0 :(得分:1)

您可以使用javascript来实现这种影响

标记

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

答案 1 :(得分:0)

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