【问题标题】：How to display a DIV during a period of time? Javascript如何在一段时间内显示一个DIV？ Javascript
【发布时间】：2020-10-07 21:31:45
【问题描述】：

我在 Django 中有一个查询，显示当前用户的所有帖子按帖子的开始日期排序。

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

有谁知道在 Javascript 中如何在帖子开始前的最后 15 分钟内显示 HTML div？

我有两个字段可以让这个脚本工作：开始日期和开始时间

非常感谢！欢迎任何想法！

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

【问题讨论】：

我们很乐意为您提供帮助。但是我们确实希望您至少尝试过创建它。在问题中包含您的代码。

标签： javascript python jquery django

【解决方案1】：

这里有两点需要考虑：

隐藏的 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/

【讨论】：

嗨@Lajos Arpad 谢谢你的回答！我已经用你的答案编辑了问题中的代码，但没有工作......脚本总是删除类并显示消息......我错过或忘记了什么吗？谢谢！！
@chrislumber 欢迎您。您需要在每个 div 中为 data-publish-time 的属性设置正确的值。
@chrislumber 你是对的。执行过程中出现了问题。编辑了我的答案，添加了经过测试的概念验证以及可以对其进行测试的链接。
你摇滚！！！！代码有效！！但是我发现了一个未来几天的错误......例如，如果发布日期在明年“2021-01-01 08:00:00”，则该函数正在删除“不可见”类。 . 你知道为什么会这样吗？
@chrislumber 乐于提供帮助。这个错误很有趣。显然这个数字太大了，setTimeout 无法正确处理它。我添加了一个安全措施，见jsfiddle.net/vokzL10y

【解决方案2】：

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

setTimeout(function()

{

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

}, 5000);

5秒后会显示div

【讨论】：