如何在JavaScript定时器结束后显示网页隐藏的内容区块

HTML结构调整 #

将页面拆分为两个独立的功能区块：

• 倒计时展示区块：保留原有带id="demo"的段落标签，用于实时展示剩余倒计时时长
• 待解锁内容区块：给需要倒计时结束后才展示的内容设置独立id（比如id="locked-content"），初始状态设置为隐藏，参考写法：

<p id="demo"></p>

<!-- 默认隐藏的待解锁内容 -->
<div id="locked-content" style="display: none;">
  此处填写倒计时结束后才可公开的网站内容
</div>

JS逻辑修改 #

在原有倒计时脚本的基础上，仅需在倒计时结束的判定分支中，追加隐藏内容的显示逻辑即可，改造后的完整脚本如下：

// 设置倒计时截止时间
var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime();

// 每1秒刷新一次倒计时状态
var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;

  // 计算剩余的时、分、秒数值
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // 更新倒计时展示文本
  document.getElementById("demo").innerHTML = hours + "h " +
    minutes + "m " + seconds + "s ";

  // 倒计时结束的处理逻辑
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "内容已解锁";
    // 移除内容的隐藏状态
    document.getElementById("locked-content").style.display = "block";
  }
}, 1000);

实用注意点 #

• 纯前端的隐藏逻辑仅能做基础的体验层控制，若需要严格防止用户通过控制台修改元素状态绕过倒计时，需要在服务端对受保护的内容做对应的访问权限校验
• 若倒计时总时长超过24小时，建议补充天数的计算逻辑，避免将整天时长全部折算为小时展示带来的计数偏差

内容的提问来源于stack exchange，提问作者Mr duck