如何每小时弹出模态？

Question

我想显示从 10 到 6 开始的每个小时的弹出模式，以编写登录用户报告。它应该像 10 点时弹出窗口一样工作，用户编写他们的报告并关闭它。 1 小时后，即 11 点钟再次弹出。

我正在使用 laravel 7、javascript 和 jquery。这些语言中的任何一种对我来说都很方便。请帮帮我。

这是我目前使用的代码

** 弹出模态的javascript代码**

setInterval(function () {
       get_task_data();
    }, 3600000);
  
    
    $.ajaxSetup({
        headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
    });

   function get_task_data() {
    
        $.ajax({
            url: '{{ route('project.employee.task') }}',
            type:'GET',
            data: { }
        }).done(function(data){
             $('#myModal .modal-body').append(data);
            $('#myModal').modal('show');
        });
    }

但我想在 10 点 0 点、11 点等准确弹出模态，直到 6 点 0 点。

已编辑

我想每小时发送一次“桌面通知”“请发送您的报告”，类似这样。我该怎么做？

Answer 1

使用类似 100/200ms 延迟的间隔，然后检查当前分钟是否为 0。为了避免多次调用，请检查当前 H-m 是否与上次调用不同。

let last = null;
setInterval(function() {
  const d = new Date();
  const curr_hm = `${d.getHours()}-${d.getMinutes()}`;
  if (d.getMinutes() == 0 && curr_hm != last) {
    console.log('Do task here!');
    last = curr_hm;
  }
}, 200);

Answer 2

如果没问题，可以使用Window setInterval()方法

如何使用？

setInterval(function(){ 
    // Call your modal popup init function here__
}, 3600000);

3600000 = 3600 秒 = 60 分钟 = 1 小时

了解更多关于设置间隔Click here

---

以下示例，代码将用于每隔一小时显示警报弹出窗口

setInterval(function(){ 
    alert("Hello");
}, 3600000);

更新的代码片段

此代码将用于精确显示弹出模式 10 0' 时钟，11 点时钟等等，直到 6 0' 时钟。

var currentDate = new Date(); // get your current date and time__
var curentHour = currentDate.getHours(); // get Hours of your current time__
var curentMinutes = currentDate.getMinutes(); // get minutes of your current time__

var intervalId = null;
var varCounter = 0; // count the display times, and set initial value
var displayTimes = 9; // between 10'O clock to 6'O clock modal has to display 9 times

// stop function arround 6'O clock 
var varModal = function(){
     if(varCounter < 10) {
          varCounter++; // you can remove this code
          alert(varCounter + 'time'); // you can remove this code
         
          /* your code goes here */
          
     } else {
          // stop modal duisplay after 9 times, it's mea after on 6'O clock 
          clearInterval(intervalId);
          alert('Stop will start on next day'); // you can remove this code
     }
};

/*
* display modal arround 10'O clock, 
* This function will trigger after each one hour, 
* So you have to set value 9, then only it'trigger arround 10'O clock
* -------
* If you want to trigger this modal arround 9'O clock, you have to check with value 8
*/
  
  
if(curentHour >= 9 && curentMinutes > 0){
  intervalId = setInterval(varModal, 3600000);
}

快速测试

从上述代码 sippet 更新以下代码

   if(curentHour >= 9 && curentMinutes > 0){
      intervalId = setInterval(varModal, 3600000);
    }

改为

var localTimeInHours = 11; // have to mention your current time hours
var hoursForValidation = localTimeInHours - 1;

   if(curentHour >= hoursForValidation && curentMinutes > 0){
      intervalId = setInterval(varModal, 30000);
    }

我在上述代码中做了以下更改

1. 我将 3600000 更改为 30000（30000 = 30 秒），这将用于 每 30 秒显示一次弹出窗口

2. 使用您的小时值更新 localTimeInHours 变量 当前时间，请查看以下示例：

• 如果您当前的本地时间是 11.15am，则更新值 localTimeInHours* 变量值应为 11
• 如果您当前的本地时间是10.00am 更新值localTimeInHours 变量值应该是10
• 如果您当前的本地时间是 10.00pm = 22.00pm 更新值 localTimeInHours 变量值应该是 22
• 如果您当前的本地时间是 6.40pm = 18.40pm 更新值 localTimeInHours 变量值应该是 18