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

Question

我发现了一个循环计时器，我想在网站上使用它来计时 25 分钟的类(class)，中间有 5 分钟的休息时间。

计时器每分钟计时一次，总共运行 30 个 div，这给了我想要的结果，但有一点。

此时，从页面加载开始倒计时。但是，我希望它通过与服务器时钟理想地同步来在每小时和半小时开始(我想我已经读过它会很复杂并且更容易与设备的系统时钟同步)。

时间是绝对的，因为它反射(reflect)了学校的时间表。类(class)每隔一小时和半小时开始一次，因此无论何时加载页面，查看页面的每个人都需要在计时器上看到相同的结果。

这意味着如果页面在整点 10 点加载，它应该显示还剩 15 分钟的类(class)。我想需要有一些方法可以在页面加载后暂停倒计时，直到分钟在它同步的任何时钟上滴答作响，然后从循环中的那一分钟开始倒计时。

我将如何调整 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);