2016-04-12 4 views
0

Я новичок в JQuery и Javascript, я пытаюсь написать небольшую функцию setTimeout, но, похоже, это не сработает. Ниже мой код, может кто-то помочь, указав, что здесь не так.Javascript setTimeout с 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

Ваш код выполняется на .click на submit кнопки - это означает, что выполняется только при нажатии на кнопку. Кроме того, используя setTimeout, вы запускаете его только один раз, и по внутренней логике функции кажется, что вы хотите, чтобы она продолжалась. Замените setTimeout на setInterval, чтобы он работал. .

`$ ("# отправить") нажмите (функция() { вар = $ формата: первый формат ("# вход") Val(); вар mainTimeVal = timeVal.split (. ":"); вар минута = ParseInt (mainTimeVal [0]); вар второго = 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

я сделал, но это, кажется, не работает, если он работает для вас, вы можете пожалуйста произвести скрипку? @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>