我已经在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填充了这些隐藏字段的值。
答案 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