单击按钮后显示倒计时

Question

我有代码html

<div id="container">
    <a href="#container">Show Content</a>
    <div id="content">I am some content!</div>
</div>

当我点击 Show Content 回显倒计时（12 秒）后显示如何 <div id="content">I am some content!</div>

举个工作的例子。谢谢

Answer 1

您的 div(content) 没有隐藏，因此会出现在屏幕上。首先隐藏 div 使用：

<div id="content" style="display: none">I am some content!</div>

现在在节目内容中添加一个onclick事件div:

<a href="#container" onclick="showDiv()">Show Content</a>

定义showDiv函数：

var showDiv = function(){
    setTimeout(function(){
        document.getElementById('container').style.display = '';  //Edit suggested by RobG
    }, 12000);
}

Answer 2

您可以使用 javaScript window.setTimeout 函数递归调用相同的超时函数，直到计数器达到 0；

var ctr = 12;

function showTimer(){
  window.setTimeout(function() {
    if(ctr >= 0) {
      document.getElementById("counter").innerHTML = ctr + 's';     
      showTimer();
      ctr--; 
    }
  }, 500);
}

<div id="container">
    <a href="#container" onClick="showTimer()">Show Content</a>
    <div id="counter"></div>
    <div id="content">I am some content!</div>
</div>

Answer 3

编辑： 示例更新为在倒计时开始时显示元素并在倒计时结束时隐藏它们。当用户单击 link 时，将调用 countToShow 函数。初始隐藏的 'ads' 元素立即显示在命令 adsElement.style.display = '' 中（删除内联指定的 display: none 样式）。当倒计时结束时 (remainingSeconds === 0)，我再次隐藏 'ads' 元素设置 adsElement.style.display = 'none'.

这是一个使用 setInterval 函数的示例，可以指定倒计时时间。

function countToShow(timeInSeconds) {

  var countdownElement = document.getElementById('countdown');
  var contentElement = document.getElementById('content');
  var adsElement = document.getElementById('ads');
  var remainingSeconds = timeInSeconds;

  adsElement.style.display = '';
  countdownElement.innerHTML = remainingSeconds;

  var interval = setInterval(function() {

    countdownElement.innerHTML = --remainingSeconds;

    if (remainingSeconds === 0) {
      clearInterval(interval);
      contentElement.style.display = '';
      adsElement.style.display = 'none';
    }

  }, 1000);
}

<div id="container">
  <a href="#container" onclick="countToShow(12)">Show Content</a>
  <div id="ads" style="display: none">
    <div id="countdown"></div>
    <div>Ads</div>
  </div>
  <div id="content" style="display: none">I am some content!</div>
</div>

单击按钮后显示倒计时

Show Countdown after button click

javascript

countdown