Question

我有代码html

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

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

给我一个工作的例子。感谢

Answer 1

您的div（内容）未被隐藏，因此屏幕上已经存在。首先使用：

隐藏div

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

现在向节目内容div添加onclick个事件：

<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

编辑：更新示例以在倒计时开始时显示元素，并在倒计时结束时隐藏它们。当用户单击链接时，将调用countToShow函数。使用命令adsElement.style.display = ''（删除内联指定的display: none样式）会立即显示初始隐藏的“ads”元素。当倒计时结束时（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>

单击按钮后显示倒计时

3 个答案: