修改倒计时脚本以在特定日期和时间重复每周

时间:2015-04-15 17:47:32

标签: javascript jquery

我正在浏览倒计时脚本的不同想法。我喜欢这个是如何工作的,因为你可以输入一个确切的日期而不必处理为数字日期减去1,因为它们从0开始。

function cdtd() {
    var xmas = new Date(" 00:01:00");
    var now = new Date();
    var timeDiff = xmas.getTime() - now.getTime();
    if (timeDiff <= 0) {
                clearTimeout(timer);
        document.write("Christmas is here!");
        // Run any code needed for countdown completion here
        }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
        minutes %= 60;
        seconds %= 60;
    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;
    var timer = setTimeout('cdtd()',1000);
}

HTML

Days Remaining:
<div id="daysBox"></div>
Hours Remaining:
<div id="hoursBox"></div>
Minutes Remaining:
<div id="minsBox"></div>
Seconds Remaining:
<div id="secsBox"></div>

运行功能

<script type="text/javascript">cdtd();</script>

我需要它在这样的功能中;但是,我现在有一个项目,要求倒计时每周重复一次,以检测特定的一周和一天的时间。

所以,例如:

周日上午10:00

它需要倒计时直到达到那一点。星期日上午10:00之后,需要重新开始倒计时,直到下周日上午10:00。

我怎样才能实现这一目标。同样,我喜欢倒计时示例的整体结构;但是,如果你有一个更好的脚本倒数计时器,我可以接受其他人的想法。

谢谢!

1 个答案:

答案 0 :(得分:0)

这样的事情会起作用:

但是,我会尝试将 var now 替换为服务器时间(通过PHP),这样您就可以确保所有用户都看到相同的倒计时。

 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 * 60 * 60 * 1000 : 0;
  var now = new Date(new Date().getTime() + offset);
  var days = 7 - now.getDay() || 7;
  var hours = 24 - now.getHours();
  var minutes = 60 - now.getMinutes();
  var seconds = 60 - now.getSeconds();
  return [plural('day', days),
          plural('hour', hours),
          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);