JavaScript setInterval issue

-3

Я пытаюсь создать секундомер, который займет минуты из окна ввода, а затем я конвертирую его в считанные секунды. И я уменьшал секунды один за другим, я использую метод «set Interval» для этого. но это не сработает. Это как мой файл JavaScript выглядит следующим образом:JavaScript setInterval issue

window.onload = function(){ 
    //creating the inputminutes text Box 
    var inputMin = document.createElement("input"); 
    inputMin.setAttribute('id','inputMin'); 
    inputMin.setAttribute('type','text'); 
    //creating the submit button 
    var btn = document.createElement('input'); 
    btn.setAttribute('type','submit'); 
    btn.setAttribute('id','submit'); 
    btn.setAttribute('value','Start'); 

    document.getElementById('form').appendChild(inputMin); 
    document.getElementById('form').appendChild(btn); 


    document.getElementById('form').onsubmit = function() {  
     function countDown(){ 
      var minutes = document.getElementById('inputMin').value; 
      if(isNaN(minutes)) { 
       alert("Please Enter a number..."); 
       return; 
      } 
      var seconds = parseFloat(minutes * 60); 
      seconds--; 
      return seconds; 
     } 
     var tick = setInterval(countDown(),2000); 

     document.getElementById('time').innerHTML = tick.toString(); 
    } 
}

И это как мой HTML выглядит следующим образом:

<html> 
<head> 
<title></title> 
    <style> 
     body{ 
      margin:auto; 
      width:500px; 
     } 
     h2{ 
      font-size: 40px; 
      font-family: Arial; 
     } 
    </style> 
    <script type="text/javascript" src="js/app.js"></script> 
</head> 
<body> 
    <form id="form"></form> 
    <h2 id="time">0.00</h2> 
</body> 

</html>

может кто-то пожалуйста, дайте мне идею, как решить эту проблему. заранее спасибо!!!

источник

2015-01-09 Dayan

Может быть, вы должны .. .... точно объясните, что пойдет не так ..... Кроме «это не сработает». –

Остановить изменение размещенного кода так: SO не следует использовать как «живой отладчик», и есть более эффективные способы анализа проблемы. – user2864740

Неправильно используется setInterval. setInterval возвращает дескриптор интервала, чтобы вы могли очистить его с помощью clearInterval. Он не возвращает секунды из функции countDown. Я бы переместил document.getElementById('time').innerHTML в нижнюю часть функции countDown и установил ее непосредственно на секунды. Также setInterval принимает функцию в качестве первого параметра, поэтому не включайте в конце (), это фактически выполняет функцию, то есть setInterval(countDown,2000) Я также не объявлял бы функцию внутри обработчика onsubmit, нет необходимости, и вы можете получить обзорные вопросы. Также начало функции countDown всегда получает значение, если поле inputMin, поэтому всегда сбрасывается, поэтому, честно говоря, вы бы лучше всего поменять его на setTimeout и называть себя рекурсивно. Также вам нужно остановить форму от публикации, это сразу будет обновлять страницу (и, похоже, ничего не делает). Я бы потенциально не использовал форму, так как вы не хотите, чтобы она отправляла (отправляла), просто подключите обработчик кликов к кнопке.

Так что-то вроде следующего должно решить вещи

window.onload = function() { 
    //creating the inputminutes text Box 
    var inputMin = document.createElement("input"); 
    inputMin.setAttribute('id', 'inputMin'); 
    inputMin.setAttribute('type', 'text'); 
    //creating the submit button 
    var btn = document.createElement('input'); 
    btn.setAttribute('type', 'submit'); 
    btn.setAttribute('id', 'submit'); 
    btn.setAttribute('value', 'Start'); 

    document.getElementById('form').appendChild(inputMin); 
    document.getElementById('form').appendChild(btn); 


    document.getElementById('form').onsubmit = function (e) { 
     //Start the countDown with the value from the box, as seconds 
     setTimeout(function(){countDown(document.getElementById('inputMin').value * 60)}, 2000); 
     return false; //Need to also stop the post of the form 

    } 
} 
function countDown(seconds) {  
    if (isNaN(seconds)) { 
     alert("Please Enter a number...");   
    } 
    else 
    { 
     seconds--; 
     document.getElementById('time').innerHTML = seconds; 
     if (seconds > 0) { 
      setTimeout(function() { countDown(seconds); }, 2000); 
     } 
    } 

}

источник

2015-01-09 00:41:03 OJay

извините..то все равно ничего не делает ..... html-страница не меняется вообще ... – Dayan

Только что сделал редактирование, понял, что с вашим кодом возникает гораздо больше логических проблем – OJay

я понять, как ее решить .... используя это решение скрипт Java ....

<div id="time">ddd</div> 
<script> 
var seconds=0 
var minutes=1 
time.innerHTML = "My new text!"; 
function display(){ 
if (seconds<=0){ 
    seconds=59 
    minutes-=1 
} 
if (minutes<=-1){ 
    seconds=0 
    minutes+=1 
} 
else 
    seconds-=1 
    time.innerHTML = minutes+"."+seconds ; 
    setTimeout("display()",1000) 
} 
display() 

</script>

источник

2015-01-10 08:04:01 Dayan

JavaScript setInterval issue

ответ

Смежные вопросы