如何在一段时间内显示DIV？Javascript

Question

我在Django中有一个查询，显示了当前用户在帖子开始日期之前所订购的所有帖子

我想在HTML模板中显示一个DIV，上面写着：<div>“Will start soon”</div>，在文章开始前15分钟

有人知道在Javascript中如何在post开始前的最后15分钟内显示HTMLdiv

我有两个字段用于使此脚本正常工作： 开始日期和开始时间

多谢各位！欢迎任何意见

<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()));
     }

Answer 1

您可以使用setTimeOut函数，它将在给定的时间后显示div

setTimeout(function()

{

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

}, 5000);

它将在5秒后显示div

Answer 2

这里有两件事要考虑：

隐藏分区

你可以有一个隐藏的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{}

编辑

经过测试，我意识到在实现中存在问题。以下是概念证明：

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/