Egg Timer Javascript

Je cherche à créer une application de minuterie d'oeuf que l'utilisateur passe en valeur par différentes étiquettes de sélection de forme. Ce faisant, ils règlent la minuterie, quand j'essaie de le faire, je reçois une erreur NaN. Dans la suite, j'ai le javascript avec lequel je travaille actuellement et un peu du HTML mais pas tout.Egg Timer Javascript

<html> 
<head> 
<script language = "javascript" type = "text/javascript"> 

var minutes 

var miuntes=setInterval(timer, 1000); //1000 will run it every 1 second 

function timer(m) 
{ 
    minutes = m; 
    minutes=minutes-1; 
    if (minutes <= 0) 
    { 
    clearInterval(minutes); 
    //counter ended, do something here 
    return; 
    } 

document.getElementById("txt").innerHTML=minutes + "minutes"; // watch for spelling 
} 


function checktimer() 
{ 

var checkbox1 = form.preference.value; 
var checkbox2 = form.eggsize.value; 
var checkbox3 = form.suacepansize.value; 

if(checkbox1 == 1 && checkbox2 == 1 && checkbox3 == 1) 
{ 
m = 3; 
s = 0; 
} 

timer(m); 
} 

</script> 

</head> 
<body> 
<div id = "txt"> </div> 

    <form id="form" onclick ="checktimer()"> 

    <div class = "question"> 
    <div class="circle"> <h2 class = "whiteh2"> 1 </h2></div> 
    <div class="question-text"><h6>How do you like your egg? </h6> </div> 
    <select id="prefernce" name ="preference"> 
    <option value="1">Soft</option> 
    <option value="2">Medium</option> 
    <option value="3">Hard</option> 
</select> 

    </div> <!--Ends the question div--> 

<div class = "question"> 
    <div class="circle"> <h2 class = "whiteh2"> 2 </h2></div> 
    <div class="question-text"><h6>What size is your egg? </h6> </div> 
    <select id="eggsize" name = "eggsize"> 
    <option value="1">Small</option> 
    <option value="2">Medium</option> 
    <option value="3">Large</option> 
</select> 

    </div> <!--Ends the question div--> 

    <div class = "question"> 
    <div class="circle"> <h2 class = "whiteh2"> 3 </h2></div> 
    <div class="question-text"><h6>What size is the saucepan? </h6> </div> 
    <select id="saucepansize" name = "suacepansize"> 
    <option value="1">Small</option> 
    <option value="2">Medium</option> 
    <option value="3">Large</option> 
</select> 

    </div> <!--Ends the question div--> 

     <div class = "question"> 
      <input type="submit" id="button" name="submit" value = "Go" onclick="checktimer()"/> <br/> 
     </div> 

    </form> 

    </div> <!--Ends the main form div--> 

</body> 
</html>

Source

2012-12-24 user1839207

Vous avez oublié la question –

Il vous manque la balise de script de fin. – 0x499602D2

Question semble être au-dessus du code pour moi. Mais je fais un programme de minuterie, l'utilisateur fixe l'heure en utilisant les éléments déroulants. Cela devrait changer la variable de la minute et la minuterie devrait commencer. Cependant, je reçois une erreur NaN en passant les minutes en arrière. – user1839207

J'ai fait quelques changements.

je propose l'événement onclick à un événement onsubmit, et je revenir faux à partir de la fonction d'arrêter la forme de présentation.
Parce que l'intervalle court lorsque la page se charge, elle s'efface instantanément - si je commence l'intervalle du gestionnaire onsubmit
J'ai renommé la variable d'intervalle pour éviter deux variables appelées « minutes » (même si l'on a été mal orthographié)
je renoncé à l'argument m que vous avez les minutes variables globales

note: à l'heure actuelle, il compte à rebours à une minute par seconde - soit vous devez fois les minutes de 60 et comptez en secondes, ou ne lancez l'intervalle qu'une fois par minute.

Le script ajusté complet est:

<html> 
<head> 
<script type="text/javascript"> 
var minutes = 0; 
var interval; 

function timer() { 
    minutes = minutes - 1; 

    document.getElementById("txt").innerHTML= minutes + " minutes"; // watch for spelling 

    if (minutes <= 0) { 
    //counter ended, do something here 
    window.clearInterval(interval); 
    return; 
    } 
} 


function checktimer() { 
    var checkbox1 = form.preference.value; 
    var checkbox2 = form.eggsize.value; 
    var checkbox3 = form.suacepansize.value; 

    if(checkbox1 == 1 && checkbox2 == 1 && checkbox3 == 1) { 
     minutes = 3; 
     s = 0; 
    } 

    interval = setInterval(timer, 1000); 

    return false; 
} 

</script> 

</head> 
<body> 
<div id = "txt"> </div> 

    <form id="form" onsubmit="return checktimer()"> 

    <div class = "question"> 
    <div class="circle"> <h2 class = "whiteh2"> 1 </h2></div> 
    <div class="question-text"><h6>How do you like your egg? </h6> </div> 
    <select id="prefernce" name ="preference"> 
    <option value="1">Soft</option> 
    <option value="2">Medium</option> 
    <option value="3">Hard</option> 
</select> 

    </div> <!--Ends the question div--> 

<div class = "question"> 
    <div class="circle"> <h2 class = "whiteh2"> 2 </h2></div> 
    <div class="question-text"><h6>What size is your egg? </h6> </div> 
    <select id="eggsize" name = "eggsize"> 
    <option value="1">Small</option> 
    <option value="2">Medium</option> 
    <option value="3">Large</option> 
</select> 

    </div> <!--Ends the question div--> 

    <div class = "question"> 
    <div class="circle"> <h2 class = "whiteh2"> 3 </h2></div> 
    <div class="question-text"><h6>What size is the saucepan? </h6> </div> 
    <select id="saucepansize" name = "suacepansize"> 
    <option value="1">Small</option> 
    <option value="2">Medium</option> 
    <option value="3">Large</option> 
</select> 

    </div> <!--Ends the question div--> 

     <div class = "question"> 
      <input type="submit" id="button" name="submit" value = "Go"/> <br/> 
     </div> 

    </form> 

    </div> <!--Ends the main form div--> 

</body> 
</html>

Source

2012-12-24 15:01:26 Fenton

Merci, cela fonctionne très bien :) – user1839207

Merci, cela fonctionne super bien :) – wymyszony

var miuntes = setInterval(timer, 1000);

Vous n'êtes pas régler la fonction timer avec des arguments, ce qui rend la variable il faut m ont la valeur undefined. Lorsque undefined est utilisé en arithmétique avec des nombres, il renvoie NaN, ce qui explique votre problème. Pour définir un argument à votre fonction, envelopper l'appel timer dans une expression de fonction:

var miuntes = setInterval(function() { 
    timer(...); 
}, 1000);

Remplacer ... avec le numéro que vous souhaitez la fonction timer prendre.

Également vous avez orthographié minutes erroné dans cette déclaration variable. Et il vous manque également la balise de fin </script>.

Source

2012-12-24 14:49:05 0x499602D2

changement

var miuntes=setInterval(timer, 1000);

var minutes=setInterval(timer, 1000);

et essayer

Source

2012-12-24 14:50:47 Saju

Heres un Countdown pour l'intégralité des autres réponses

function countDown(m, el, callback) { 
    var count = m * 60 * 1000; 
    var d = new Date(0, 0, 0, 0, 0, 0); 
    d.setTime(count); 

    function down(t) { 
     if (count > 0) { 
      count -= 1000; 
      d.setTime(count); 
      document.getElementById(el).innerHTML = (d.getHours() - 1) + ":" + d.getMinutes() + ":" + d.getSeconds(); 
     } else { 
      clearInterval(inter); 
      callback(); 
     } 
    } 

    var inter = setInterval(down, 1000); 
} 

countDown(1, "Time", function() { // 1. the minutes , 2. the element which will be updated , 3. a callback function when the timer finished 
    alert("Timer Ended"); 
});

Heres un JSBin

Donc dans l'ensemble, il serait

<head> 
    <script language="javascript" type="text/javascript"> 
     function timer(m, el, callback) { 
      var count = m * 60 * 1000; 
      var d = new Date(0, 0, 0, 0, 0, 0); 
      d.setTime(count); 

      function down(t) { 
       if (count > 0) { 
        count -= 1000; 
        d.setTime(count); 
        document.getElementById(el).innerHTML = (d.getHours() - 1) + ":" + d.getMinutes() + ":" + d.getSeconds(); 
       } else { 
        clearInterval(inter); 
        callback(); 
       } 
      } 

      var inter = setInterval(down, 1000); 
     } 

     function checktimer() { 

      var checkbox1 = form.preference.value; 
      var checkbox2 = form.eggsize.value; 
      var checkbox3 = form.suacepansize.value; 

      if (checkbox1 == 1 && checkbox2 == 1 && checkbox3 == 1) { 
       m = 3; 
       s = 0; 
      } 

      timer(m, "txt", function() { 
       alert("Egg finished") 
      }); 

     } 
    </script> 
</head> 

<body> 
    <div id="txt"></div> 
    <form id="form" onclick="checktimer()"> 
     <div class="question"> 
      <div class="circle"> 
       <h2 class="whiteh2"> 1 </h2> 
      </div> 
      <div class="question-text"> 
       <h6>How do you like your egg? </h6> 
      </div> 
      <select id="prefernce" name="preference"> 
       <option value="1">Soft</option> 
       <option value="2">Medium</option> 
       <option value="3">Hard</option> 
      </select> 
     </div> 
     <!--Ends the question div--> 
     <div class="question"> 
      <div class="circle"> 
       <h2 class="whiteh2"> 2 </h2> 
      </div> 
      <div class="question-text"> 
       <h6>What size is your egg? </h6> 
      </div> 
      <select id="eggsize" name="eggsize"> 
       <option value="1">Small</option> 
       <option value="2">Medium</option> 
       <option value="3">Large</option> 
      </select> 
     </div> 
     <!--Ends the question div--> 
     <div class="question"> 
      <div class="circle"> 
       <h2 class="whiteh2"> 3 </h2> 
      </div> 
      <div class="question-text"> 
       <h6>What size is the saucepan? </h6> 
      </div> 
      <select id="saucepansize" name="suacepansize"> 
       <option value="1">Small</option> 
       <option value="2">Medium</option> 
       <option value="3">Large</option> 
      </select> 
     </div> 
     <!--Ends the question div--> 
     <div class="question"> 
      <input type="button" id="button" name="submit" value="Go" onclick="checktimer()" 
      /> 
      <br/> 
     </div> 
    </form> 
    </div> 
    <!--Ends the main form div--> 
</body>

Heres une autre JSBin

Je laisse la mise en forme (par exemple 2 padding nombre de la minuterie) et les temps pour que les oeufs soient prêts à vous

Source

2012-12-24 15:06:53 C5H8NNaO4

Egg Timer Javascript

Répondre

Questions connexes