30 Detik Waktu Mundur
<!DOCTYPE html>
<html>
<head></head>
<body>
<section id="mainBody">
<div class="container">
<div class="wider" id="middleSection">
<div class="quizCard" id="quizBody" >
<div class="timeCountdown">
<span><span id="timerSecond">0</span> Detik</span>
</div>
<div class="quizQuestion">
<div id="questionString">
</div>
</div>
<div class="quizAnswer">
</div>
</div>
</div>
</div>
</section>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
$(document).ready(function(){
showQuestion();
});
function showQuestion() {
startTimer(30, document.querySelector('#timerSecond'), 1);
}
function startTimer(duration, display, questionId) {
display.textContent = duration;
timerInterval = setInterval(
function () {
duration--;
let seconds = parseInt(duration);
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = seconds;
if (duration < 0) {
clearInterval(timerInterval);
let ansId = $("[name='answer']:checked").val() == undefined ? -1 : $("[name='answer']:checked").val();
nextQuestion(questionId, ansId);
}
}, 1000);
}
</script>
</html>
.png)
Tidak ada komentar