javascript - 定时器后向用户显示不同的内容

Question

我正在创建一个页面，该页面从用户加载页面开始倒计时 30 秒。页面应从 30 开始倒计时，然后在倒数到 0 时隐藏计时器。

countdown div 应在 30 秒后隐藏，而应显示包含要向用户显示的内容的 reveal div。

let timer = 30;

const interval = setInterval(function() {
  timer--;
  $('.timer').text(timer);
  if (timer === 0) clearInterval(interval);
}, 1000);


$(function() {
    setTimeout(function() {
        $("#successMessage").hide('blind', {}, 30000)
    }, 1000);
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="countdown">
<p class="timer">…</p>
</div>


<div class="reveal">    
<p>Here is the revealed content</p>
</div>

上面是我的代码，定时器工作正常。我希望当它达到 0 时，countdown 的 div 被替换为 reveal 而不是像现在这样同时显示它们。

非常卡在这里，所以任何帮助将不胜感激。

Answer 1

这是一种可能的解决方案。 .reveal div 被设置为在加载时隐藏，一旦倒计时完成，.countdown div 被隐藏，.reveal div显示:

let timer = 5;
$(document).ready(function () {
  $('.timer').text(timer);
});

const interval = setInterval(function() {
  timer--;
  $('.timer').text(timer);
  if (timer < 0) {
    clearInterval(interval);
    $(".countdown").hide()
    $(".reveal").show()
  }
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="countdown">
<p class="timer">…</p>
</div>


<div class="reveal" style="display:none;">    
<p>Here is the revealed content</p>
</div>