javascript - Bootstrap模态警报框中根据Timing设置自动弹出窗口警报框

Question

大家好，我面临着一个问题，我需要一个弹出警报框窗口在每天早上 9:30 自动升起，并且应该在上午 11:30 结束，下午又应该在上午 1:30 到 2:30 添加学生的出勤率。我尝试过，但无法根据我们的服务器时间设置时间。请查看我的代码并帮助我，并对他们表示极大的感谢。

<div class="modal fade" id="overlay"> <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal aria-hidden="true">&times;</button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
    <p>Context here</p>
  </div>
</div>

<script>$('#overlay').modal('show');setTimeout(function() {
$('#overlay').modal('hide');}, 5000);

Answer 1

由于它比评论长，我必须将其发布在这里，

让我这样解释一下。在您可以在特定时间显示模态之前，您需要做一些事情。当您加载页面并且代码到达具有 Date() 函数的行时，它将记录该时刻，并在那里停止。

这就是您需要某种实时更新时间的地方，以便您获得实时时间。对于这个例子，这就是为什么我说你可以使用像 moment.js 这样的库。

我将在这里为您提供两个选项:(普通)

 function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = h + ":" + m + ":" + s;
}

setInterval(time, 1000);

setInterval 每 1 秒(1000 毫秒)运行一次时间函数。

要让你的函数按照你想要的方式运行，你可以在特定时间使用 if 语句，然后根据该语句触发你的模式。并在一段时间后隐藏它。

对于你的 if 条件，你可以这样写:

if(d.getHours() == 9 && d.getMinutes() = 30){
  //show modal
}

https://jsfiddle.net/xpvt214o/698686/