Question

我试图制作一个简单的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();
}

Answer 1

这个怎么样：

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);

Answer 2

这个怎么样：

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 );
}

Answer 3

这样的事情？

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);
}

Answer 4

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

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/

Answer 5

尝试使用递归，例如：

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()
 }
}

请参阅this jsfiddle

Answer 6

这适用（在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();
}

Answer 7

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);

}

试试这个

Answer 8

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

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

Javascript倒计时settimeout

8 个答案: