У меня есть запрос в Django, который показывает все сообщения текущего пользователя, упорядоченные по дате начала сообщения.

Я хочу отобразить a DIV в шаблоне HTML с надписью: <div>“Will start soon”</div> ,за 15 минут до времени начала публикации.

Кто-нибудь знает в Javascript, как я могу отобразить этот HTML div -код в течение последних 15 минут перед началом публикации?

У меня есть два поля для работы этого скрипта: Start_date и start_time

Большое вам спасибо! Любая идея приветствуется!

 <div class="publish-reminder invisibles" data-publish-time="{{ post.date_start }} {{ post.start_time }}">Will start soon</div>
  

 for (let publishReminder of document.querySelectorAll("div.publish-reminder.invisibles")){
          setTimeout(function() {
              publishReminder.classList.remove("invisibles");
          },  new Date(publishReminder.getAttribute("data-publish-time") - new Date()));
     }
  

Здесь следует учитывать две вещи:

Скрытый div

У вас может быть скрытое div подобное

 <div class="publish-reminder invisible" data-publish-time="2020-10-08 01:07:00"><!-- Some content here --></div>
  

И CSS

 .invisible {
    display: none;
}
  

Генерация HTML на сервере

Ваш сервер генерирует некоторый HTML, и вам нужно проверить при загрузке страницы, будет ли публикация опубликована менее чем за 15 минут. Если сообщение должно быть опубликовано менее чем за 15 минут, не создавайте invisible класс в div . Поскольку этот вопрос касается Javascript, я не буду подробно рассказывать о рендеринге на стороне сервера.

Рендеринг на стороне клиента

Давайте сделаем что-то вроде этого:

 for (let publishReminder of document.querySelectorAll("div.publis-reminder.invisible")) {
    setTimeout(function() {
        publishReminder.classList.remove("invisible");
    }, new Date(publishReminder.getAttribute("data-publish-time") - new Date()));
}
  

Объяснение:

• мы получаем все напоминания о публикации, которые (все еще невидимы)
• мы зацикливаем их
• мы вычисляем время, когда они должны отображаться, вычитая текущую дату из даты публикации и передавая полученные миллисекунды в качестве второго параметра setTimeout
• при обратном вызове мы удаляем invisible class

Редактировать

После тестирования я понял, что в реализации есть проблемы. Вот доказательство концепции:

 function getDateString(dt) {
    return `${dt.getFullYear()}-${(dt.getMonth()   1)}-${dt.getDate()} ${dt.getHours()}:${dt.getMinutes()}:${dt.getSeconds()}`;
}

var dateStrings = [];

var dt;
dt = new Date();
dt.setMinutes(dt.getMinutes()   5);
dateStrings.push(getDateString(dt));
dt = new Date();
dt.setMinutes(dt.getMinutes()   15);
dateStrings.push(getDateString(dt));
dt = new Date();
dt.setMinutes(dt.getMinutes()   16);
dateStrings.push(getDateString(dt));
dt = new Date();
dt.setMinutes(dt.getMinutes()   17);
dateStrings.push(getDateString(dt));

var divs = `
    <div class="publish-reminder invisible" data-publish-time="${dateStrings[0]}">First article</div>
    <div class="publish-reminder invisible" data-publish-time="${dateStrings[1]}">Second article</div>
    <div class="publish-reminder invisible" data-publish-time="${dateStrings[2]}">Third article</div>
    <div class="publish-reminder invisible" data-publish-time="${dateStrings[3]}">Fourth article</div>

`;

document.body.innerHTML  = divs;

for (let publishReminder of document.querySelectorAll("div.publish-reminder.invisible")) {
    setTimeout(function() {
        publishReminder.classList.remove("invisible");
    }, ((new Date(publishReminder.getAttribute("data-publish-time"))) - (new Date())) - (15 * 60 * 1000));
}
  

Скрипка: https://jsfiddle.net/Lp02h5u4/2 /

Вы можете использовать функцию setTimeout, она будет отображать div по истечении заданного времени

 setTimeout(function()

{

$('.publish-reminder').show();// or fade, css display however you'd like.

}, 5000);
  

он отобразит div через 5 секунд