我的测验倒数计时器无法正常工作

时间:2018-10-10 10:34:32

标签: javascript html

我已经在php中创建了一个简单的测验站点,我想为每个问题集成30秒的倒计时计时器,这是代码:

var timeleft = 30;
var downloadTimer = setInterval(function(){
    timeleft--;
    document.getElementById("countdowntimer").textContent = timeleft;
    if(timeleft <= 0) {
        clearInterval(downloadTimer);
    }
    document.getElementById("quiz").submit();
},1000);

计时器代码:

You have  <span id='countdowntimer'> </span> Seconds left

问题是,当测验开始时,在计时器结束之前提交了表单,我希望在计时器达到0之后提交表单。

好的yovopaw解决了我的问题,但现在又有一个测验代码:

<form action="process.php" method="get" id="quiz">
                            <ul class="list-unstyled" id="questions">
                                <li> <h3><?php echo $question['questions']; ?></h3> 
                                    <ul class="list-unstyled">  
                                        <?php
                                            while($choice = mysqli_fetch_assoc($result)){
                                         echo "<li><input type='radio' name='quiz' class='choices' value='".$choice['id']."' > ".$choice['choices']."  </li> ";
                                        } ?>
                                    </ul>
                                </li>
                                <input type="hidden" name="start" value=<?php echo $start; ?>>
                                <input type="hidden" name="cate" value=<?php echo $selected; ?>>
                                <input type="hidden" name="total" value=<?php echo $total; ?>>
                                <input type="hidden" name="qn" value=<?php echo $questionnumber; ?>>
                                <li> <input type="submit" value="Next" class="btn btn-primary" id="next"> </li> 
                            </ul>
                        </form>

这也是JavaScript代码,用于在未选择任何选项的情况下停止使用以转到下一个问题

document.getElementById("quiz").onsubmit = function(event){
            var btn = document.getElementById("next");

    var choices = document.getElementsByClassName("choices");
    for(var i=0;i<choices.length;i++){
        if(choices[i].checked){
            return true;
        }
    }
        event.preventDefault();
        return alert("you must choose option first");
    }

所以问题是,当用户单击选择并单击下一步时,它可以按预期工作,但是当计时器达到0并提交表单时,它不会转到下一个问题,我只是得到空白页,其中的URL填充了这些隐藏字段的值。

1 个答案:

答案 0 :(得分:2)

尝试一下

var timeleft = 30;
var downloadTimer = setInterval(function() {
  timeleft--;
    document.getElementById("countdowntimer").textContent = timeleft;
    if(timeleft <= 0) {
        clearInterval(downloadTimer);
        console.log(`SUBMIT`)
    }},1000);
You have  <span id='countdowntimer'> </span> Seconds left