显示倒计时点击

Question

我有前戏码HTML

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

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

给我的工作的例子。谢谢

Answer 1

编辑：实施例更新以示出当倒计时开始元素和隐藏时的倒计时结束。当用户点击链接时，调用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>

Answer 2

您的div（内容）没有隐藏，因此会在屏幕上。首先通过使用隐藏的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 3

您可以使用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>