2

1秒間隔ごとにボタンの値を3から1に変更する単純なJavaScriptカウントダウンタイマーを作成しようとしています。コードは機能しましたが、多くの機能を使用しています。少ない量で作れないか悩みました。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

これはどう：

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 に答える
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( )
{
  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 に答える
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 に答える
0

このソリューションを Chrome Debugger ツールでテストしました。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 に答える