javascript - 煮蛋计时器 Javascript-6ren

javascript - 煮蛋计时器 Javascript

转载作者：行者123 更新时间：2023-11-30 18:13:20

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

最佳答案

我做了一些改变。

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