将环形计时器同步到系统时钟

Question

我发现了一个环形计时器，我想在一个网站上使用25分钟的课时，中间休息5分钟。

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

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

时间是绝对的，因为它反映了学校的时间表。每隔半小时就开始上课，所以看页面的每个人都需要在计时器上看到相同的结果，而不管他们什么时候加载页面。

这就意味着，如果页面在一小时后10点加载，它应该显示还剩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);