javascript - 将文本添加到 JS 倒计时

Question

我正在使用下面的代码在 10 秒倒计时后隐藏 DIV。它工作得很好，但目前它只显示 10、9、8 等。我应该修改什么才能添加这样的纯文本“此框将在（10、9、8 等）秒内关闭”非常感谢

http://jsfiddle.net/QhLcR/

<div id="news-container" style="border:5px solid black;width:100%; background: red;">dfdf

<div id="countdown" style="border:1px solid black;width:120px;float: right;">test</div></div>


var time = 10;

window.setInterval(test, 1000);

function test()
{
             time -=1;
    $('#countdown').html(time); 

if(time == 0)        
{

    $('#news-container').remove();
}
}

Answer 1

像这样？http://jsfiddle.net/QhLcR/1/

var time = 10;

window.setInterval(test, 1000);

function test() {
    time -= 1;
    $('#countdown').html('This box will be closed in ' + time + ' seconds');

    if (time == 0) {

        $('#news-container').remove();
    }
}

Answer 2

已调整 Div 大小并添加了文本

<div id="news-container" style="border:5px solid black;width:100%; background: red;">dfdf

<div id="countdown" style="border:1px solid black;width:220px;float: right;">test</div></div>


var time = 10;

window.setInterval(test, 1000);

function test() {
time -= 1;
$('#countdown').html('This box will be closed in ' + time + ' second(s)');

         if (time == 0) 
         {

              $('#news-container').remove();
         }
}

Answer 3

<div id="news-container" style="border:5px solid black;width:100%; background: red;">dfdf

<div id="countdown" style="border:1px solid black;width:120px;float: right;">test</div></div>


var time = 10;

window.setInterval(test, 1000);

function test()
{
             time -=1;
    $('#countdown').html("The box will close in "+time+" seconds!"); 

if(time == 0)        
{

    $('#news-container').remove();
}
}