2016-04-12 24 views
0

私はJQueryとJavascriptを使い慣れていないので、小さなsetTimeout関数を記述しようとしていますが、動作していないようです。以下は私のコードですが、ここで何が間違っているのかを指摘して助けてくれる人もいます。Javascript setTimeout function with JQuery

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>countdown</title> 
    <script type="text/javascript" src="/jquery-2.1.4.js"></script> 
    <script> 
    $("#submit").click(function(){ 
     var timeVal = $("#input").val(); 
     var mainTimeVal = timeVal.split(":"); 
     var minute = parseInt(mainTimeVal[0]); 
     var second = parseInt(mainTimeVal[1]); 
     //console.log(second); 

     setTimeout(function() { 

      if (minute == 0 && second == 0) { 
       alert("no time left"); 
      } 
      else if (second !== 0) { 
       second--; 
      } 
      else { 
       minute--; 
       second = 60; 
      } 
      second--; 
     }, 1000); 
    }); 
    </script> 
</head> 
<body> 
    <input type="text" id="input" value="25:23"/><br> 
    <button type="button" id="submit" value="send"></button> 
</body> 
</html> 

答えて

1

あなたのコードはsubmitボタンを.click上で実行される - あなたはボタンをクリックすると、それだけで実行します。また、setTimeoutを使用すると、一度しか実行されておらず、関数の内部ロジックによって、実行中であると思われます。実行するにはsetTimeoutsetIntervalを代用してください。

`$( "#が提出する"()関数(){ VAR TIMEVAL = $( "#入力")をクリックしてくださいヴァル(); VAR mainTimeVal = timeVal.split(。。 ":"); VAR分=のparseInt(mainTimeVal [0]); するvar秒=のparseInt(mainTimeVal [1]); //console.log(秒);

setInterval(function() { 

     if (minute == 0 && second == 0) { 
      alert("no time left"); 
     } 
     else if (second !== 0) { 
      second--; 
     } 
     else { 
      minute--; 
      second = 60; 
     } 

     $('#input').val(minute + ':' + second); 
    }, 1000); 
});` 
+0

私がやった....電話をかけると、再び呼び出しを再帰的にする必要があるが、それは、それはあなたのために働く場合は、plsはフィドルを生成することができ、動作しないようですか? @Velimir – Pappy

+0

あなたは 'submit'を押してからタイマーをカウントし続け、時間が過ぎてからアラートが正しく発射されるようにしたいのですか? –

+0

はい、正確には、setTimeoutをsetIntervalに置き換えましたが、時間はカウントダウンされますが、間隔は「秒ですが、1秒遅れます」@Velimir – Pappy

0

私は少しあなたのコードを修正し、フィドルを作成しました:JsFiddle

$("#submit").click(function(){ 
    var timeVal = $("#input").val(); 
    var mainTimeVal = timeVal.split(":"); 
    var minute = parseInt(mainTimeVal[0]); 
    var second = parseInt(mainTimeVal[1]); 

    setTimeout(function() { 

     if (minute == 0 && second == 0) { 
      alert("no time left"); 
     } 
     else if (second !== 0) { 
      second--; 
     } 
     else { 
      minute--; 
      second = 60; 
     } 
     second--; 

     $('#input').val(minute + ':' + second); 
    }, 1000); 
}); 
0

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>countdown</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

</head> 
<body> 
    <input type="text" id="input" value="25:23"/><br> 
    <input type="button" id="submit" value="send"></input> 
    <script> 
    $("#submit").click(function(){ 
     var timeVal = $("#input").val(); 
     var mainTimeVal = timeVal.split(":"); 
     var minute = parseInt(mainTimeVal[0]); 
     var second = parseInt(mainTimeVal[1]); 
     //console.log(second); 

     setTimeout(function() { 

      rece(); 
      function rece(){ 
      if (minute == 0 && second == 0) { 
       alert("no time left"); 
       console.log('no time left') 
      } 
      else if (second !== 0) { 
       second--; 
       console.log('second'); 
       rece(); 
      } 
      else { 
       minute--; 
       second = 60; 
       console.log('minute'); 
       rece(); 
      } 
      second--; 
      } 

     }, 100); 
    }); 
    </script> 
</body> 
</html>