1

我正在寻找创建一个鸡蛋计时器应用程序，用户通过各种表单选择标签传入值。通过这样做，他们设置了计时器，当我尝试这样做时，我得到一个 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>
4

4 回答 4

2

我做了一些改变。

  1. 我将onclick事件移动到一个onsubmit事件，并从函数返回 false 以阻止表单提交。
  2. 因为间隔在页面加载时运行，所以它会立即自行清除 - 所以我从 onsubmit 处理程序开始间隔
  3. 我重命名了间隔变量以避免两个称为“分钟”的变量（尽管一个拼写错误）
  4. 我已经省略了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-24T15:01:26.210 回答
0 
var miuntes = setInterval(timer, 1000);

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

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

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

您在该变量声明中也拼错了分钟。而且您还缺少结束</script>标签。

于 2012-12-24T14:49:05.873 回答
0

改变

var miuntes=setInterval(timer, 1000);

到

var minutes=setInterval(timer, 1000);

并尝试

于 2012-12-24T14:50:47.410 回答
0

这是其他答案完整性的倒计时

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>

​​​​​</p>

这是另一个JSBin

我将格式（例如计时器的 2 个数字填充）和准备好鸡蛋的时间留给你

于 2012-12-24T15:06:53.600 回答