2

我试图制作一个简单的 javascript 倒数计时器，每隔一秒将按钮中的值从 3 更改为 1。我得到了代码，但它使用了许多功能。我想知道我是否可以减少使用它。我试图将倒计时放在显示 i 值的 for 循环中，但它似乎无法正常工作。

这是我的代码：

 function launch( )
{
  document.getElementById("blast").value = "Preparing to launch...";
  setTimeout ( "countdown3()", 1000 );
}
function countdown3()
{
    document.getElementById("blast").value = "3";
    setTimeout("countdown2()", 1000);
}
function countdown2()
{
    document.getElementById("blast").value = "2";
    setTimeout("countdown1()", 1000);
}

function countdown1()
{
document.getElementById("blast").value = "1";
setTimeout("GO()", 1000 );
}
function GO()
{
    document.getElementById("blast").value = "BLAST OFF";
    move();
}
4

8 回答 8

3

这个怎么样 ：

function launch(seconds, id, message, callback)
{
    var target = document.getElementById(id);
    target.innerHTML = message;

    var countDownId = setInterval( function(){
       target.innerHTML = seconds;
       if(seconds == 0){
          clearInterval(countDownId);
          callback(target);          
       }
       seconds--;
    }, 1000 );

}

function GO(target)
{
    target.innerHTML = "BLAST OFF";
    move();
}

launch(3, "blast", "Preparing to launch...", GO);
于 2012-04-05T07:57:06.017 回答
1

这有效（在 chrome 上测试）

function launch( )
{
  document.getElementById("blast").value = "Preparing to launch...";
  setTimeout ( "countdown(3)", 1000 );
}

function countdown(index)
{
    if(index==0) {
         GO();
         return
    }

    document.getElementById("blast").value = index;
    setTimeout("countdown("+(--index)+")", 1000);
}

function GO()
{
    document.getElementById("blast").value = "BLAST OFF";
    move();
}
于 2012-04-05T08:05:37.527 回答
1

这是一种适用于任何消息的通用方式，而不仅仅是倒计时。显然，如果您有更长的倒计时时间，这不是一件好事 - 但是根据您当前的消息与计数器比率，我会说这是一个很好的解决方案：

function launch() {
    var elem = document.getElementById('blast');
    var step = 0;
    var messages = ['Preparing to launch', '3', '2', '1', 'LIFTOFF'];
    window.setTimeout(function() {
        elem.value = messages[step++];
        if(step < messages.length) {
            window.setTimeout(arguments.callee, 1000);
        }
    }, 1);
}

launch();

演示：http: //jsfiddle.net/ThiefMaster/qmBXs/

于 2012-04-05T07:56:19.597 回答
1

尝试使用递归，例如：

var blast = document.getElementById("blast");
countdown();

function countdown() {
 var nwvalue = Number(blast.value)-1; 
 blast.value = nwvalue;
 if (nwvalue>0) {
  setTimeout(countdown, 1000 ); //- value>0: call countdown in a timeout again
 } else {
  blast.value = 'all done';     //- here you would call GO()
 }
}

看到这个jsfiddle

于 2012-04-05T07:57:59.357 回答
1

这个怎么样：

function launch( )
{
    var countdown = function (index) {
        if(index > 0) {
          document.getElementById("blast").value = index;
          setTimeout (function() { countdown(index - 1) }, 1000 );
        }
        else {
          document.getElementById("blast").value = "BLAST OFF";
          move();
        }  
    };

    document.getElementById("blast").value = "Preparing to launch...";
    setTimeout (function() { countdown(3) }, 1000 );
}
于 2012-04-05T07:55:10.550 回答
1

像这样的东西？

var i = 4;
document.getElementById("blast").value = 'Preparing to launch...';
function doIt(){
  var timerId = setInterval(function(){
    i--;
    if( i > 0 )
       document.getElementById("blast").value = i;
    else {
       document.getElementById("blast").value = 'BLAST OFF'; 
       clearInterval(timerId);
    }
  },1000);
}
于 2012-04-05T07:55:29.460 回答
0

我在 Chrome 调试器工具中测试了这个解决方案。将 document.getElementById 属性替换为 console.info 并在调试器中运行它以查看控制台上的输出。

function countdown(start, duration) {

    if(start == duration) {
        setTimeout(function() {
            document.getElementById("blast").value = "BLAST OFF";
            // console.info("BLAST OFF");
        },duration * 1000);
        return;
    } else {

        setTimeout(function() {

            document.getElementById("blast").value = start;
            // console.info(start);

        }, (duration-start) * 1000);
        countdown(start+1, duration);
    }    

}

countdown(0,3);  // 3 seconds
于 2012-04-05T08:02:13.977 回答
0 
var i =3;
function launch( )
{
  document.getElementById("blast").value = "Preparing to launch...";
  setTimeout ( function() { countDown() }, 1000 );
}
function countDown()
{
if(i<0)
   i="blast off";
document.getElementById("blast").value = i;
i--;
setTimeout("countDown()",1000);

}

尝试这个

于 2012-04-05T07:55:22.010 回答