鸡蛋计时器Javascript_Javascript

鸡蛋计时器Javascript

javascript

鸡蛋计时器Javascript,javascript,Javascript,我希望创建一个egg计时器应用程序，用户通过各种表单选择标记传入值。通过这样做，他们设置了计时器，当我尝试这样做时，我得到了一个NaN错误。下面是我目前正在使用的javascript和一点HTML，但不是全部 <html> <head> <script language = "javascript" type = "text/javascript"> var minutes var miuntes=setInterval(timer, 1000); //1

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


var分钟数
var miuntes=设置间隔（计时器，1000）//1000将每1秒运行一次
功能计时器（m）
{
分钟=m；
分钟=分钟-1；
如果（分钟）
3.
这个平底锅多大尺寸？
小的
中等
大的

您没有使用任何参数设置函数

timer

，这使得它所取的变量

具有值

undefined

。当

undefined

用于数字算术时，它返回

NaN

，从而解释了您的问题。要为函数设置参数，请将

timer在函数表达式中调用：
var miuntes = setInterval(function() {
    timer( ... );
}, 1000);

将…
替换为您希望函数计时器使用的数字
此外，您在变量声明中拼写的分钟数错误。您还缺少结尾标记。
更改
var miuntes=setInterval(timer, 1000);

到
试试看，我做了一些改动
我将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>


var分钟=0；
var区间；
函数计时器（）{
分钟=分钟-1；
document.getElementById（“txt”）.innerHTML=minutes+“minutes”；//注意拼写
如果（分钟）
3.
这个平底锅多大尺寸？
小的
中等
大的


以下是其他答案完整性的倒计时
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");
});

这里有一个
所以总的来说是这样的
<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>



函数计时器（m、el、回调）{
var计数=m*60*1000；
var d=新日期（0,0,0,0,0,0）；
d、 设定时间（计数）；
功能下降（t）{
如果（计数>0）{
计数-=1000；
d、 设定时间（计数）；
document.getElementById（el.innerHTML=（d.getHours（）-1）+“：”+d.getMinutes（）+”：“+d.getSeconds（）”；
}否则{
间隔时间；
回调（）；
}
}
var inter=设定间隔（向下，1000）；
}
函数checktimer（）{
var checkbox1=form.preference.value；
var checkbox2=form.eggsize.value；
var checkbox3=form.suacancepansize.value；
if（checkbox1==1&&checkbox2==1&&checkbox3==1）{
m=3；
s=0；
}
定时器（m，“txt”，函数（）{
警报（“蛋已完成”）
});
}
1.
你的鸡蛋怎么样？
软的
中等
硬的
2.
你的鸡蛋多大？
小的
中等
大的
3.
这个平底锅多大尺寸？
小的
中等
大的




还有一个
我保留格式设置（例如计时器的2个数字填充）以及鸡蛋准备好的时间您缺少结束脚本标记。问题似乎在代码上方。但我正在制作一个鸡蛋计时器程序，用户使用下拉项设置时间。这将更改分钟变量，计时器将启动。但是，我在传回分钟时遇到一个NaN错误。
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");
});

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