Question

我找到了一个循环计时器，我想在一个网站上使用25分钟的课程，中间休息5分钟。

计时器每分钟都会计时，并且共计30个div，这给了我想要的结果但是只有一件事。

目前，倒计时从页面加载开始。但是，我想通过理想地与服务器时钟同步来开始每小时半小时（我想我已经读过它会很复杂，并且更容易将它与设备的系统时钟同步）。 / p>

时间是绝对的，因为它反映了学校的日程安排。课程每小时半小时开始，所以每个查看页面的人都需要在计时器上看到相同的结果，无论他们何时加载页面。

这意味着如果页面在一小时后加载，那么应该显示还有15分钟的课程。我想在页面加载之后需要有一些方法可以暂停倒计时，直到与它同步的任何时钟的分钟结束，然后在循环中从那一分钟开始倒计时。

我如何调整JS代码来执行此操作？

(function ($) {

    $("#lesson-timer div:first").css("display", "block");

    jQuery.fn.timer = function() {
        if(!$(this).children("div:last-child").is(":visible")){
            $(this).children("div:visible")
                .css("display", "none")
                .next("div").css("display", "block");
        }
    else{
        $(this).children("div:visible")
            .css("display", "none")
        .end().children("div:first")    
            .css("display", "block");
    }
} // timer function end

window.setInterval(function() {
    $("#lesson-timer").timer();
}, 60000);

})(jQuery);

这是HTML：

<div id="lesson-timer">
<div class="lesson">
<div>
<h2>Lesson</h2>
<p>25</p>
</div>
<div>
<h2>Lesson</h2>
<p>24</p>
</div>
<div>
<h2>Lesson</h2>
<p>23</p>
</div>
<div>
<h2>Lesson</h2>
<p>22</p>
</div>    
<div>
<h2>Lesson</h2>
<p>21</p>
</div>
<div>
<h2>Lesson</h2>
<p>20</p>
</div>
<div>
<h2>Lesson</h2>
<p>19</p>
</div>
<div>
<h2>Lesson</h2>
<p>18</p>
</div>
<div>
<h2>Lesson</h2>
<p>17</p>
</div>
<div>
<h2>Lesson</h2>
<p>6</p>
</div>
<div>
<h2>Lesson</h2>
<p>15</p>
</div>
<div>
<h2>Lesson</h2>
<p>14</p>
</div>    
<div>
<h2>Lesson</h2>
<p>13</p>
</div>
<div>
<h2>Lesson</h2>
<p>12</p>
</div>
 <div>
<h2>Lesson</h2>
<p>11</p>
</div>
<div>
<h2>Lesson</h2>
<p>10</p>
</div>
<div>
<h2>Lesson</h2>
<p>09</p>
</div>
<div>
<h2>Lesson</h2>
<p>08</p>
</div>
<div>
<h2>Lesson</h2>
<p>07</p>
</div>
<div>
<h2>Lesson</h2>
<p>06</p>
</div>
<div>
<h2>Lesson</h2>
<p>05</p>
</div>
<div>
<h2>Lesson</h2>
<p>04</p>
</div>    
<div>
<h2>Lesson</h2>
<p>03</p>
</div>
<div>
<h2>Lesson</h2>
<p>02</p>
</div>
<div>
<h2>Lesson</h2>
<p>01</p>
</div>
</div>
<div class="break">    
<div>
<h2>Break</h2>
<p>05</p>
</div>
<div>
<h2>Break</h2>
<p>04</p>
</div>    
<div>
<h2>Break</h2>
<p>03</p>
</div>
<div>
<h2>Break</h2>
<p>02</p>
</div>
 <div>
<h2>Break</h2>
<p>01</p>
</div>
</div>    
</div>

Answer 1

如果您希望每个人都看到相同的剩余时间，那么您只需使用Ajax调用从中央服务器检索时间。这应该在几秒钟内完成（Ajax调用的往返时间）。然后，您可以将该时间解析为小时，分钟和秒，以初始化本地计数器，然后根据共享服务器时间显示当前30分钟窗口中剩余的时间。

例如，如果您使用Ajax调用以Date构造函数接受的格式检索基于服务器的时间，则可以执行以下操作：

// parse time and calc how many minutes left in 30 minute class
var serverTime = new Date(serverTimeStr).getTime();
var serverOffset = serverTime - new Date().getTime();

// so to calculate the server time, you get the current localTime
// and add the serverOffset to it

function calcMinutesLeftInLesson() {
    var curServerTime = new Date(new Date().getTime() + serverOffset);
    var minutes = curServerTime.getMinutes();
    var halfHourRemaining = 60 - minutes;
    var lessonRemaining, breakRemaining;

    if (halfHourRemaining > 30) {
        halfHourRemaining -= 30;
    }
    // lessons are only 25 minutes long so subtract last 5 minutes
    lessonRemaining = halfHourRemaining - 5;
    if (lessonRemaining < 0) {
        // in break time now
        breakRemaining = 5 + lessonRemaining;
    } else {
        // in lesson time now
        // lessonRemaining time left in the lesson
    }
}    

var interval = setInterval(calcMinutesLeftInLesson}, 10 * 1000);

将循环定时器同步到系统时钟

1 个答案: