在计时器之后提交表格

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="assetsjstimer.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; ?>

定时器.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'));

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

你不应该在计时器中调用JS函数CountDown(5，$('#display'(.js

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

让我们创建一个索引.php文件请检查它。表单提交在计时器上您可以在JavaScript中传递时间倒计时(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>

相关内容

最新更新

热门标签：