Javascript 将循环计时器与系统时钟同步

我发现了一个循环计时器，我想在一个网站上使用它来计时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>

课程
二十五

课程
二十四

课程
二十三

课程
二十二

课程
二十一,

课程
二十

课程
十九,

课程
十八

课程
十七,

课程
六,

课程
十五

课程
十四,

课程
十三,

课程
十二,

课程
十一,

课程
十,

课程
09

课程
08

课程
07

课程
06

课程
05

课程
04

课程
03

课程
02

课程
01

打破
05

打破
04

打破
03

打破
02

打破
01

如果希望每个人都能看到相同的剩余时间，那么只需使用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);

//解析时间并计算30分钟的课程还剩多少分钟
var serverTime=新日期（serverTimeStr）.getTime（）；
var serverOffset=serverTime-new Date（）.getTime（）；
//因此，要计算服务器时间，您需要获取当前本地时间
//并将serverOffset添加到其中
函数calcMinutesLeftInLesson（）{
var curServerTime=new Date（new Date（）.getTime（）+serverOffset）；
var minutes=curServerTime.getMinutes（）；
var半小时维护=60分钟；
var Lesson剩余，BreakLesting剩余；
如果（半小时维护>30）{
半小时维护-=30；
}
//课程只有25分钟，所以减去最后5分钟
Lesson剩余=半小时剩余-5；
如果（剩余的第1课<0）{
//现在休息时间
breakleveling=5+剩余的lesson；
}否则{
//现在上课时间到了
//新概念英语第二册课余时间
}
}    
var interval=setInterval（calcMinutesLeftInLesson}，10*1000）；

为什么您关心页面计时器是否与实际分钟同步？时间安排不都是相对于页面本身的浏览而言的吗？它需要与外部代理（其他用户或服务器）同步到第二个吗？感谢您的响应。对不起，如果我在原来的帖子里不清楚。时间是绝对的，因为它反映了学校的时间表。每小时半开始上课，因此，无论何时加载页面，每个查看页面的人都需要在计时器上看到相同的结果。你有一个奇怪的“学校时间表”。你确定你的大多数访客都熟悉这个吗？是的。我们学校已经成立，学生和老师都知道时间表。每节课25分钟，课间休息5分钟。示例：如果我的课程在10:00开始，我在9:50加载页面，那么课程计时器应该显示上一个时间表时间段还剩5分钟&然后是5分钟的休息时间，然后从那里开始倒计时——而不是从用户碰巧访问页面时开始倒计时。否则，实时授课的学生和教师将看不到关于课堂剩余时间的相同信息。学生和教师不在同一地点。我们在课程开始和结束的确切时间上存在一些分歧。这是为了取代一个学校的铃声，它将在现实世界中宣布课程开始和结束时间。我希望这能澄清这一点。