Javascript 每天倒计时

Question

我需要为每天 21:00 制作倒数计时器。计数到直播。如果时间小于 21:00，则显示剩余时间，如果时间为 21:00-22:00我想显示“立即流式传输”。 22:00后开始计时至明天21:00。

关于如何做到这一点有什么建议吗？

这是我到目前为止尝试过的方法，但效果不佳，而且如果客户更改其计算机上的时间，计数器也会更改。我需要在服务器端解决这个问题，这样每个人都会同时显示。

    <script type="text/javascript">
        $(document).ready(function(){
            var curT, tarT, difT;

            curT = new Date().getTime()/1000;
            tarT = new Date('<?php echo (new DateTime('May 05, 2014'))->add(new DateInterval("P1D"))->format('M d, Y');?>, 21:00:00').getTime()/1000;

            init();

            function init(){
                var d,h,m,s;
                difT = tarT - curT;
                function updateT(){
                    s = difT;
                    d = Math.floor(s/86400);
                    s -= d * 86400;
                    h = Math.floor(s/3600);
                    s -= h * 3600;
                    m = Math.floor(s/60);
                    s -= m * 60;
                    s = Math.floor(s);
                }
                function tick(){
                    clearTimeout(timer);
                    updateT();
                    displayT();
                    if(difT>0){
                        difT--;
                        timer = setTimeout(tick,1*1000);
                    } else {
                        $('.timeleft').html('Aukcija u toku...');
                    }
                }
                function displayT(){
                    var out;
                    out = h+":"+m+":"+s;
                    $('.timeleft').html(out);
                }
                var timer = setTimeout(tick,1*1000);
            }
        });
    </script>

Answer 1

由于您需要上述两个脚本的组合，我为您组合了它们: http://jsfiddle.net/69TAf/

• 从 GMT 服务器读取实时时间
• 客户时区无关紧要
• GMT 服务器在开始时只被 ping 一次(为了更好的性能)
• 添加了前导零以使其看起来更好

感谢 edcs 和 Miskone!

var date;
var display = document.getElementById('time');

$(document).ready(function() {
    getTime('GMT', function(time){
        date = new Date(time);
    });    
});

setInterval(function() {
    date = new Date(date.getTime() + 1000);

    var currenthours = date.getHours();
    var hours;
    var minutes;
    var seconds;
    if (currenthours != 21){
        if (currenthours < 21) {
            hours = 20 - currenthours;
        } else {
            hours = 21 + (24 - currenthours);
        }
        minutes = 60 - date.getMinutes();
        seconds = 60 - date.getSeconds();

        if (minutes < 10) {
            minutes = '0' + minutes;
        }
        if (seconds < 10) {
            seconds = '0' + seconds;
        }

        display.innerHTML = hours + ':' + minutes + ':' +seconds;
    } else { 
        display.innerHTML = 'LIVE NOW';
    }
}, 1000);

function getTime(zone, success) {
    var url = 'http://json-time.appspot.com/time.json?tz=' + zone,
        ud = 'json' + (+new Date());
    window[ud]= function(o){
        success && success(new Date(o.datetime));
    };
    document.getElementsByTagName('head')[0].appendChild((function(){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = url + '&callback=' + ud;
        return s;
    })());
}

和 html:

<div id='time'></div>

如果您不想通过 ping 外部服务器来获取时间，您可以使用这个 fiddle (不适用于 jsfiddle，因为它包含 php): http://jsfiddle.net/qQ6V3/ - 我认为这样更好。