Javascript/PHP倒数计时器，每秒钟更新一次，并倒数到特定的日期和时间 [英] Javascript/PHP countdown timer that updates every second and counts down to a specific date and time

问题描述

所以下面的代码是到目前为止我可以使用的代码；但是，并不能完全满足我的需要.

So the code below is the code that I was able to work with so far; however, doesn't do exactly what I need it to do.

我希望能够调用一个函数(又名:sundayDelta())，但是，我希望能够定义希望该函数在调用内的倒数中使用的星期几和一天中的时间功能的我不确定这是否可能...但是我在想这样的事情

I want to be able to call a function (aka: sundayDelta() ), however, I would love to be able to define the day of week and time of day I want the function to use in the countdown inside the calling of the function. I'm not sure if this is possible...but I was thinking something like this

sundayDelta(1,1000)，它将变成星期几(星期日)和一天中的时间:1000(上午10:00).不知道这样的事情是否可能发生；但是，我希望是这样.我计划在一天中的不同时间出现在同一页面上的多个倒数计时.

sundayDelta(1,1000) which would turn into Day of Week Sunday and time of day: 1000 (10:00am). Not sure if something like this is even possible; however, I'm hoping it is. I plan on having multiple countdowns going on the same page just appearing at different times of day.

倒计时结束后，我希望它刷新div(与div的名称无关)

When the countdown finishes, I want it to refresh a div (doesn't matter what name the div has)

我也很希望能够将PHP服务器时间纳入其中，这样无论他们身在何处，每个人都可以看到正确的倒计时.

I would also love to be able to incorporate PHP server time into this that way everyone is seeing the correct countdown no matter where they are.

任何帮助都会很棒！感谢您的输入！

Any help would be great! Thanks for your input!

function plural(s, i) {
  return i + ' ' + (i > 1 ? s + 's' : s);
}

function sundayDelta(offset) {
  // offset is in hours, so convert to miliseconds
  offset = offset ? offset * 20 * 20 * 1000 : 0;
  var now = new Date(new Date().getTime() + offset);
  var days = 7 - now.getDay() || 7;
  var hours = 10 - now.getHours();
  var minutes =  now.getMinutes() - 00 ;
  var seconds =  now.getSeconds()- 00;
    if (hours < 0){
      days=days-1;
    }
    var positiveHours= -hours>0 ? 24-(-hours) : hours;
  return [plural('day', days),
          plural('hour', positiveHours),
          plural('minute', minutes), 
          plural('second', seconds)].join(' ');
}

// Save reference to the DIV
$refresh = $('#refresh');

$refresh.text('This page will refresh in ' + sundayDelta());

// Update DIV contents every second
setInterval(function() {
  $refresh.text('This page will refresh in ' + sundayDelta());
}, 1000);

推荐答案

当我为间隔设置灵活的文本时，我喜欢减去直到没有任何剩余内容为止.这样，您只显示非零值:

When I make flexible text for intervals, I like to subtract out until nothing is left. That way you only show the non-0 values:

function sundayDelta(target_date) {
    var now = new Date();
    var offset = Math.floor((Date.parse(target_date) - now.valueOf()) / 1000);

    var r = [];
    if (offset >= 86400) {
         var days = Math.floor(offset / 86400);
         offset -= days * 86400;
         r.push(plural('day', days));
    }
    if (offset >= 3600) {
         var hours = Math.floor(offset / 3600);
         offset -= hours * 3600;
         r.push(plural('hour', hours));
    }
    if (offset >= 60) {
         var minutes = Math.floor(offset / 60);
         offset -= minutes * 60;
         r.push(plural('minute', minutes));
    }
    if (offset != 0) {
         r.push(plural('second', offset));
    }
    return r.join(' ');
}

在PHP代码中，您可以通过这种方式设置变量.而且我们暂时将时区排除在外，但是也可以通过指定时区来添加时区.

In the PHP code, you can set variable this way. And we'll leave time zones out of it for now, but they could be added as well just by specifying them.

echo "target_date = '" . date('Y-m-d H:i:s', strotime('next Sunday 10am')) . "';\n";

这篇关于Javascript/PHP倒数计时器，每秒钟更新一次，并倒数到特定的日期和时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！