如何添加提交表单的 5 分钟 javascript 倒数计时器答案

【问题标题】：How to add 5 minute javascript countdown timer which submit a form如何添加提交表单的 5 分钟 javascript 倒数计时器
【发布时间】：2016-02-12 11:36:39
【问题描述】：

我想添加 5 分钟倒数计时器，将表单提交到我的 php 页面。

        <form name="myfm" id="myfm" method="post" action="Quiz.php">
        <table width=100%> <tr> <td width=30><td></td></td></tr> <table border=0>
        <?php $n=$n+1; ?>
        <tr><td>Question  <?php echo $n." "; echo $row[2]; ?></td></tr>
        <tr><td class=style8><input type="radio" name="ques['<?php echo $n; ?>'][]" value=1><?php echo $row[3]; ?></td></tr>
        <tr><td class=style8> <input type="radio" name="ques['<?php echo $n; ?>'][]" value=2><?php echo $row[4];?></td></tr>
        <tr><td class=style8><input type="radio" name="ques['<?php echo $n; ?>'][]"  value=3><?php echo $row[5];?></td></tr>
        <tr><td class=style8><input type="radio" name="ques['<?php echo $n; ?>'][]"  value=4><?php echo $row[6];?></td></tr>

    <?php 
        }
        echo "<tr><td><input type=submit name=submit id='result' value='Get Result'></form>";
        ?>
        </table></table>
        </form>

请帮帮我..我正在做一个在倒计时结束时自动提交表单的测验页面。谢谢...

【问题讨论】：

标签： javascript php jquery forms timer

【解决方案1】：

这是你想要的，我前一阵子用过 - https://jsfiddle.net/v5uc9wfx/3/

function CountDown(duration, display) {
    if (!isNaN(duration)) {
        var timer = duration, minutes, seconds;

        var interVal = setInterval(function () {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            $(display).html("<b>" + minutes + "m : " + seconds + "s" + "</b>");
            if (--timer < 0) {
                timer = duration;
                SubmitFunction();
                $(display).empty();
                clearInterval(interVal)
            }
        }, 1000);
    }
}

这里-

CountDown(duration, display)

持续时间以秒为单位，即 300 秒 = 5 分钟。 display 是另一个你想在哪里显示的参数。

您可能还需要清除间隔-

clearInterval(interVal)

有形式

        function CountDown(duration, display) {
            if (!isNaN(duration)) {
                var timer = duration, minutes, seconds;
                
              var interVal=  setInterval(function () {
                    minutes = parseInt(timer / 60, 10);
                    seconds = parseInt(timer % 60, 10);

                    minutes = minutes < 10 ? "0" + minutes : minutes;
                    seconds = seconds < 10 ? "0" + seconds : seconds;

                    $(display).html("<b>" + minutes + "m : " + seconds + "s" + "</b>");
                    if (--timer < 0) {
                        timer = duration;
                       SubmitFunction();
                       $('#display').empty();
                       clearInterval(interVal)
                    }
                    },1000);
            }
        }
        
        function SubmitFunction(){
       $('form').submit();
        
        }
    
         CountDown(300,$('#display'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display">

</div>
<form action="/" >
<lable>Name: <input type="text"></lable>

</form>

【讨论】：

我必须使用 -> function SubmitFunction(){ $('#myfm').html('quiz'); }
@SibyXavier，没有您要提交的带有查询答案的表单。为您的目的查看另一个演示
jsfiddle.net/v5uc9wfx/4 在此链接中，只要倒计时降到 0，我就会提交表格，因此您的测验表格将在那里进行。正如你所说 - "I am doing a quiz page that automatically submit form when countdown ends"
thankyou manoz....必须点击提交按钮，所以我写了 function SubmitFunction(){ $('#result').click(); } 它有效...

【解决方案2】：

/*timer*/

      var seconds = 300;
      function secondPassed() {
          var minutes = Math.round((seconds - 30)/60),
              remainingSeconds = seconds % 60;

          if (remainingSeconds < 10) {
              remainingSeconds = "0" + remainingSeconds;
          }

          document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
          if (seconds == 0) {
              clearInterval(countdownTimer);
             //form1 is your form name
            document.form1.submit();
          } else {
              seconds--;
          }
      }
      var countdownTimer = setInterval('secondPassed()', 1000);

.timer {
    width: 100px;
    font-size: 2.5em;
    text-align: center;
}

<div class="timer">
            <time id="countdown">5:00</time>
        </div>
<form action="index.php" name="form1" id="form1">

【讨论】：

更好的答案但不完整且仅代码的答案不好发表您对答案的想法，您想对 OP 说什么。
不知道你对OP的看法？
定时器没问题，但是如何提交表单？
现在我的回答完成了。
添加一些解释可以帮助他更容易理解

【解决方案3】：

您可以在 5 分钟后使用Window setTimeout() Method 调用提交表单

setTimeout(function submitform()
{
  document.myform.submit();
}, 60*1000*5);

【讨论】：

他首先要阻止默认的表单提交
@antoniskamamis - 为什么？
@nnnnnn 如果表单提交，计时器将不再重要。页面会改变
@antoniskamamis 这个答案有一个想法，但 OP 可能需要一个计时器来直观地显示倒计时。
@Jai 如果表单提交，则页面中不会显示任何计时器。将发出新页面请求并显示新页面

【解决方案4】：

setTimeout() 将在 300000 毫秒 = 5 分钟后触发函数 SubmitForm。

function SubmitForm(){
    $("form").submit();
};
setTimeout(SubmitForm,300000);//5*60*1000

【讨论】：

输入错误，已更改
什么？？ 300 < 1000 ms 仍然是错误的，仅代码的答案往往会被删除/标记，因此最好发布一些关于您的想法的解释。
而不是计算它，应该像上面另一个答案中所建议的那样使用它：5*60*1000。

【解决方案5】：

希望对你有帮助

var trig = setInterval(timer,1000);

    var counter=0;
    var min=4;
    var sec=60;

    function timer(){

    sec=--sec;

    if(sec===0){
    min=--min;
    sec=59;
    counter=++counter;
    }

    if(counter===5){
    sec=0;
    min=0;
    clearInterval(trig);
     functionSubmit();
     document.write("Submitted");
     }

     document.getElementById("output").innerHTML = min+" : "+sec;

     }

&lt;p&gt;Autosubmit in &lt;span id="output"&gt;&lt;/span&gt;&lt;/p&gt;

【讨论】：