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 Server
客户时区无关紧要
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外部服务器以获取时间，可以使用此小提琴（不使用jsfiddle，因为包含php）： http://jsfiddle.net/qQ6V3/ - 我认为这样做会更好。

Answer 2

如果您需要每个人同时倒计时，那么您需要从集中时间服务器中获取它。这段代码正是如此：

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

getTime('GMT', function(time){
    // This is where you do whatever you want with the time:
    alert(time);
});

Source

如果您使用getTime()而不是从客户端抓取当地时间，那么每个人都将同步。

Answer 3

你可以这样做：

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

和脚本：

var display = document.getElementById('time'); 
setInterval(function(){ 
    var date = new Date();
    var currenthours = date.getHours();
    var hours;
    var minutes;
    var secondes;
    if (currenthours != 21){
        if (currenthours < 21)
            hours = 20 - currenthours;
        else hours = 21 + (24 - currenthours);
        minutes = 60 - date.getMinutes();
        secondes = 60 - date.getSeconds();
    display.innerHTML = hours + ':' + minutes + ':' +secondes;
    }
    else display.innerHTML = 'LIVE NOW';
},1000);

小提琴：http://jsfiddle.net/KbM8D/

Answer 4

很多答案，还有一个不会受伤。： - ）

我认为您最好将流式传输的开始和结束作为UNIX UTC时间值以秒为单位传递给客户端。然后客户端可以将其转换为本地日期并倒计时。使用网络时间服务器听起来不错，但这意味着每个人都必须使用相同的时间服务器，并且您依赖于可用的服务器。

如果你打算花时间，根据你的服务器，它可能也是开始和结束。您甚至可以从服务器传递当前时间并计算要在客户端应用的时间偏移量。无论如何，代码......

<script>

var countDown = (function() {
  var startStream;
  var endStream;
  var streamingText = 'streaming right now';
  var updateElement;

  // Pad single digit numbers
  function pad(n) {
    return (n<10?'0':'') + +n;
  }

  // Format a time difference as hh:mm:ss
  // d0 and d1 are date objects, d0 < d1
  function timeDiff(d0, d1) {
    var diff = d1 - d0;
    return pad(diff/3.6e6|0) + ':' + pad((diff%3.6e6)/6e4|0) + ':' + pad(diff%6e4/1000|0);
  }

  // start, end are UNIX UTC time values in seconds for the start and end of streaming
  return function(elementId, start, end) {
    var now = new Date();
    var returnValue;

    // By default, run again just after next full second
    var delay = 1020 - now.getMilliseconds();

    // turn start and end times into local Date objects
    if (start) startStream = new Date(start*1000);
    if (end) endStream = new Date(end*1000);

      // If now is after endStream, add 1 day,
      // Use UTC to avoid daylight saving adjustments
      if (now > endStream) {
        endStream.setUTCHours(endStream.getUTCHours() + 24);
        startStream.setUTCHours(startStream.getUTCHours() + 24);
      }

    // Store the element to write the text to
    if (elementId) updateElement = document.getElementById(elementId);

    // If it's streaming time, return streaming text
    if (now >= startStream && now < endStream) {
      returnValue = streamingText;

      // Run again after streaming end time
      delay = endStream - now;

    } else {
      // Otherwise, count down to startStream
      returnValue = timeDiff(now, startStream);
    }

    // Write the time left or streaming text
    updateElement.innerHTML = returnValue;

    // Call again when appropriate
    setTimeout(countDown, delay);
  };
}());


// Testing code

// Create dates for a local time of 21:00 today
var myStart = new Date();
myStart.setHours(21,0,0,0);
var myEnd = new Date()
myEnd.setHours(22,0,0,0);

// Create UNIX time values for same time as UTC
var startUTCTimeValue = myStart/1000|0
var endUTCTimeValue   = myEnd/1000|0

// Run when page loads
window.onload = function() {
  countDown('foo', startUTCTimeValue, endUTCTimeValue);
}

</script>

<div id="foo"></div>

每天Javascript倒计时

4 个答案: