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

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

我想在HTML模板中显示一个

DIV

，上面写着：

“将很快开始”

，比文章开始时间提前15分钟

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

div

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

多谢各位！欢迎任何意见

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

---

这里有两件事要考虑：

隐藏分区 你可以有一个隐藏的

div

像

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

在服务器上生成HTML 您的服务器生成一些HTML，您需要在页面加载时检查帖子是否在15分钟内发布。如果文章将在15分钟内发布，则不要在

div

中生成

invisible

类。因为这是一个关于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

• 在回调中，我们删除了

  不可见的
  类

编辑

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

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

函数getDateString（dt）{ 返回`${dt.getFullYear（）}-${（dt.getMonth（）+1）}-${dt.getDate（）}${dt.getHours（）}:${dt.getMinutes（）}:${dt.getSeconds（）}`； } var dateStrings=[]； var-dt； dt=新日期（）； dt.setMinutes（dt.getMinutes（）+5）； push（getDateString（dt））； dt=新日期（）； dt.setMinutes（dt.getMinutes（）+15）； push（getDateString（dt））； dt=新日期（）； dt.setMinutes（dt.getMinutes（）+16）； push（getDateString（dt））； dt=新日期（）； dt.setMinutes（dt.getMinutes（）+17）； push（getDateString（dt））； var divs=` 第一篇文章 第二条 第三条 第四条 `; document.body.innerHTML+=divs； for（让publishMemberofDocument.querySelectorAll（“div.publish-rementer.invisible”））{ setTimeout（函数（）{ publishReminder.classList.remove（“不可见”）； }，（（新日期（publishRemembers.getAttribute（“数据发布时间”））-（新日期（））-（15*60*1000））； }

---

Fiddle:

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

setTimeout(function()

{

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

}, 5000);

---

它将在5秒后显示div

我们将很乐意为您提供帮助。但我们确实希望你至少尝试过创造这个。在问题中包含您的代码。您好@Lajos Arpad谢谢您的回答！我已经用你的答案编辑了问题中的代码，但不起作用。。。脚本总是删除类并显示消息。。。我是错过了什么还是忘了什么？谢谢@不客气。对于数据发布时间属性，您需要在每个div中都有正确的值。@chrislumber您是对的。在执行过程中出现了一些问题。编辑了我的答案，添加了一个经过测试的概念证明以及一个链接，您可以在其中进行测试。您真是棒极了！！！！代码正在运行！！但是我在未来的日子里发现了一个bug。。。例如，如果发布日期在下一年“2021-01-01 08:00:00”，则函数将删除“不可见”类。。。你知道为什么会这样吗？@chrislumber很乐意帮忙。这只虫子很有趣。显然，这个数字太大，setTimeout无法正确处理它。我添加了一项安全措施，请参见

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

setTimeout(function()

{

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

}, 5000);