雞蛋定時器Javascript

我正在尋找創建一個雞蛋定時器應用程序，用戶通過各種形式選擇標籤傳遞值。通過這樣做，他們設置了計時器，當我嘗試這樣做時，我得到了一個NaN錯誤。在下面，我有我正在使用的JavaScript和一點的HTML，但不是全部。雞蛋定時器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>

來源

2012-12-24 user1839207

您忘記了問題 –

您錯過了結束腳本標記。 – 0x499602D2

問題似乎超出了我的代碼範圍。但是我正在製作一個雞蛋定時器程序，用戶使用下拉菜單設置時間。這應該改變分鐘的變量並且計時器應該開始。但是，當我將分鐘傳回時，我會遇到NaN錯誤。 – user1839207

我已經做了一些改動。

我感動的onclick事件的onsubmit事件，我返回false從功能從停止提交表單。
因爲頁面加載時會運行間隔，所以它會立即自行清除 - 所以我從onsubmit處理程序開始間隔
我已經重命名了interval變量以避免兩個名爲「minutes」的變量（儘管一個拼寫錯誤）
我已經與m參數分配你有可變全球分鐘

注：目前，它以每秒一分鐘計數下來 - 你要麼通過60需要時間的分鐘以秒爲單位倒計時，或每分鐘僅觸發一次間隔。

完整的調整腳本是：

<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>

來源

2012-12-24 15:01:26 Fenton

謝謝，這個作品很棒:) – user1839207

謝謝，這個作品超級棒:) – wymyszony

var miuntes = setInterval(timer, 1000);

你沒有設置功能timer使用任何參數，這使得變量需要m有值undefined。當undefined用於帶數字的算術時，它會返回NaN，這就解釋了您的問題。要設置參數的功能，包裹timer呼叫的函數表達式：

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

替換...你希望的功能timer拿號。

你也拼分鐘錯在變量聲明。而且你也錯過了結尾</script>標籤。

來源

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

變化

var miuntes=setInterval(timer, 1000);

到

var minutes=setInterval(timer, 1000);

，並嘗試

來源

2012-12-24 14:50:47 Saju

繼承人的其他答案的完整性的countDown方法

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"); 
});

繼承人JSBin

因此總的來說這將是

<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>

繼承人另一個JSBin

我離開格式（定時器的如2號填充）和雞蛋的時候要準備好你

來源

2012-12-24 15:06:53 C5H8NNaO4

雞蛋定時器Javascript

回答

相關問題