Question

我正在寻找创建一个egg timer应用程序，用户通过各种表单选择标签传递值。通过这样做，他们设置了计时器，当我尝试这样做时，我收到NaN错误。在下面我有我正在使用的javascript和一些HTML，但不是全部。

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

Answer 1

我做了一些改变。

我将onclick事件移至onsubmit事件，我从函数返回false以停止提交表单。
因为区间在页面加载时运行，所以它会立即自行清除 - 所以我从onsubmit处理程序开始间隔
我已重命名了区间变量，以避免两个名为“分钟”的变量（尽管其中一个拼写错误）
我已经免除了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>

Answer 2

var miuntes = setInterval(timer, 1000);

您没有使用任何参数设置函数timer，这使得它所需的变量m具有值undefined。当undefined用于算术与数字时，它会返回NaN，从而解释您的问题。要为函数设置参数，请将timer调用包装在函数表达式中：

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

将...替换为您希望函数timer采用的数字。

此外，您在该变量声明中拼错分钟错误。而且你也错过了结尾</script>标签。

Answer 3

更改

var miuntes=setInterval(timer, 1000);

到

var minutes=setInterval(timer, 1000);

并尝试

Answer 4

继承了其他答案完整性的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个数字填充）以及鸡蛋准备好的时间

蛋计时器Javascript

4 个答案: