定时器后提交表格

Question

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() {
  $('#submitted').html('Time is up!');
  document.getElementById('mcQuestion').submit();
}

CountDown(5, $('#display'));

<form id="mcQuestion">
  <div class="form-group">
    <h5>1. <?= $mc_q[0] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=1; $i < 5; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_1" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>2. <?= $mc_q[5] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=6; $i < 10; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_2" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>3. <?= $mc_q[10] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=11; $i < 15; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_3" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>4. <?= $mc_q[15] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=16; $i < 20; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_4" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>5. <?= $mc_q[20] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=21; $i < 25; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_5" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>6. <?= $mc_q[25] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=26; $i < 30; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_6" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>7. <?= $mc_q[30] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=31; $i < 35; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_7" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>8. <?= $mc_q[35] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=36; $i < 40; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_8" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>9. <?= $mc_q[40] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=41; $i < 45; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_9" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>

    <h5>10. <?= $mc_q[45] ?></h5>
    <ul class="list-unstyled mcq">
      <?php for ($i=46; $i < 50; $i++) : ?>
      <li>
        <input type="radio" name="mc_a_10" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;
        <?=$ mc_q[$i] ?>
      </li>
      <?php endfor; ?>
    </ul>
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-xs" data-qid="<?= $r->quiz_id ?>">Submit Answer</button>
  </div>
</form>

我为倒数计时器创建了一个js，想法是在设定的时间之后它会自动提交表格，但在我的情况下倒数计时器没有任何反应，计时器重置回原来的时间并再次倒计时它无休止地。

你能帮我找到这个问题吗？

测验显示

<?php foreach ($quiz as $r) : ?>

<div class="form-group">
    <h3><?= $r->quiz_title ?></h3>
    <h3><center>
    <script language="JavaScript" src="assets\js\timer.js"></script>

    <div id="display">

    </div>
    <div id="submitted">

    </div>

    </center>
    </h3>
    <span class="help-block"><?= $r->quiz_desc ?></span>
    <p>Posted by: <?= ucwords($r->firstname).' '.ucwords($r->lastname) ?></p>
</div>

<?php if ($r->quiz_type == 1) : ?>

    <?php $questions = unserialize($r->questionnaire); ?>
    <!-- start index at 1 -->
    <?php $questions = array_combine(range(1, count($questions)), array_values($questions)); ?>

    <hr>

    <form id="tfQuestion">
        <div class="form-group">

            <?php for ($i=1; $i<11; $i++) : ?>
                <div class="mb-25px">
                    <h5><?= $i.'. '.$questions[$i] ?></h5>
                    <span class="quiz-item-tf">
                        <input type="radio" name="tf-<?= $i ?>" value="True" required> True &nbsp;
                        <input type="radio" name="tf-<?= $i ?>" value="False" required> False
                    </span>
                </div>
            <?php endfor; ?>

        </div>

        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-xs" data-qid="<?= $r->quiz_id ?>">Submit Answer</button>
        </div>
    </form>

<?php else : ?>

    <?php
        $answers     = unserialize($r->answers);
        $mc          = unserialize($r->quiz_mc);
        // remove all True answers
        for ($i=1; $i < 61; $i++) {
            if ($mc[$i]->value <> 'True') {
                $mc_q[] = $mc[$i]->value;
            }
        }
    ?>
    <div class="row">
        <div class="col-md-12">

            <form id="mcQuestion">
                <div class="form-group">
                    <h5>1. <?= $mc_q[0] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=1; $i < 5; $i++) : ?>
                            <li><input type="radio" name="mc_a_1" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>2. <?= $mc_q[5] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=6; $i < 10; $i++) : ?>
                            <li><input type="radio" name="mc_a_2" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>3. <?= $mc_q[10] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=11; $i < 15; $i++) : ?>
                            <li><input type="radio" name="mc_a_3" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>4. <?= $mc_q[15] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=16; $i < 20; $i++) : ?>
                            <li><input type="radio" name="mc_a_4" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>5. <?= $mc_q[20] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=21; $i < 25; $i++) : ?>
                            <li><input type="radio" name="mc_a_5" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>6. <?= $mc_q[25] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=26; $i < 30; $i++) : ?>
                            <li><input type="radio" name="mc_a_6" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>7. <?= $mc_q[30] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=31; $i < 35; $i++) : ?>
                            <li><input type="radio" name="mc_a_7" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>8. <?= $mc_q[35] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=36; $i < 40; $i++) : ?>
                            <li><input type="radio" name="mc_a_8" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>9. <?= $mc_q[40] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=41; $i < 45; $i++) : ?>
                            <li><input type="radio" name="mc_a_9" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>

                    <h5>10. <?= $mc_q[45] ?></h5>
                    <ul class="list-unstyled mcq">
                        <?php for ($i=46; $i < 50; $i++) : ?>
                            <li><input type="radio" name="mc_a_10" value="<?= $mc_q[$i] ?>" required>&nbsp;&nbsp;<?= $mc_q[$i] ?></li>
                        <?php endfor; ?>
                    </ul>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-xs" data-qid="<?= $r->quiz_id ?>">Submit Answer</button>
                </div>
            </form>

        </div>
    </div>

<?php endif; ?>

Timer.js

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(){
   $('#submitted').html('Time is up!');
     document.getElementById('mcQuestion').submit();
    }

     CountDown(5,$('#display'));

Answer 1

每次显示页面时都会调用倒计时功能，而不会检查您是否有答案。

你不应该调用JS函数CountDown（5，$（'＃display'））;在timer.js中

在检查是否已提供答案后，您应该在PHP文件中调用它

Answer 2

让我们创建一个index.php文件，请检查它。在计时器上提交表单，您可以在javascript CountDown（5，div）中传递时间；功能。

            <html>
            <body>
              <form action="" method="post" name="mcQuestion" id="mcQuestion">
                Name:<input type="test" name="name" value="Test">
              <div><span id="display" style="color:#FF0000;font-size:15px"></span></div>
            <div><span id="submitted" style="color:#FF0000;font-size:15px"></span></div>
            </form>
            <script>
            var div = document.getElementById('display');
            var submitted = document.getElementById('submitted');

              function CountDown(duration, display) {

                        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.innerHTML ="<b>" + minutes + "m : " + seconds + "s" + "</b>";
                            if (timer > 0) {
                               --timer;
                            }else{
                       clearInterval(interVal)
                                SubmitFunction();
                             }

                       },1000);

                }

              function SubmitFunction(){

                submitted.innerHTML="Time is up!";
                document.getElementById('mcQuestion').submit();

               }
               CountDown(5,div);
            </script>

            </body>
            </html>