js计时器显示出现跳动 在重新开启计时器时候 会出现先继承上一次暂停计时器的时间 再从14s往下跳动 即我在回答问题点下选项按钮的时候 会有剩余时间如图8s
进入判断答案正误界面点击nextquestion按钮进入下一个问题
进入下一个问题界面后 显示剩余时间7s但是很快会跳到14s然后正常倒计时 最主要是有时候不会出现这种状况 正常从15s开始倒计时 一开始我认为是显示问题 在renwal函数开头更新 document.getElementById("timer").innerText = "Time to answer 15 seconds"; 但是没有用 后来尝试用date函数来构造计时器但是出现了其他bug 希望能得到解答
注startTimer函数构造计时器并每1s更新倒计时 stop变量实际上是我为了以按下选项按钮为条件设置的 当我没有按钮按钮 stop=F 当按下按钮 selectionAnswer函数会将stop变为T从而触发计时器中的条件进而clearInterval(timerInterval)
这是Quit.html
```html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Quit</title>
<link rel="stylesheet" href="style.css">
sss
</head>
<body>
<header>
<h1>MyWebsite</h1>
<img src="./img/school_logo.png" alt="school logo">
<nav>
<ul>
<li><a href="Introduction page.html">Home</a></li>
<li><a href="About page.html">About me</a>
<div class="submenu">
<a href="#Interest">My Interest</a>
<a href="#Major">My Major</a>
<a href="#Resume">My Resume</a>
</div>
</li>
<li><a href="Quit.html">Quiz</a></li>
</ul>
</nav>
</header>
<main>
<article>
<div id="div1">
<h2>Welcome to quiz!</h2>
<label for="welcome">Give your name: </label>
<input type="text" id="welcome" name="welcome" required minlength="4" maxlength="8" size="10" />
<button type="button" onclick="show(); renewal()" id="btn1">start</button>
</div>
<div id="div2" style="display: none">
<h2 id="questionNo">Question</h2>
<label for="welcome" id="questionText"> ? </label>
<button type="button" onclick="selectionAnswer('A')" id="btn2">A</button>
<button type="button" onclick="selectionAnswer('B')" id="btn3">B</button>
<button type="button" onclick="selectionAnswer('C')" id="btn4">C</button>
<button type="button" onclick="selectionAnswer('D')" id="btn5">D</button>
<label id="timer">Time to answer: 15 seconds</label>
</div>
<div id="div3" style="display: none">
<h2 >Your answer is correct!</h2>
<button type="button" onclick="renewal()" id="btn6">Next question</button>
</div>
<div id="div4" style="display: none">
<h2>Your answer is incorrect!</h2>
<button type="button" onclick="renewal()" id="btn7">Next question</button>
</div>
<div id="div5" style="display: none">
<h2>You completed all the questions!</h2>
<label id="CorrectAnswer">You got 2 right out of 10.</label>
<label id="timeAnswered"></label>
<label id="output"></label>
</div>
</article>
</main>
<script src="quit.js"></script>
<footer>
<p><a href="https://blog.csdn.net/weixin_74400487">My Blog</a> by Zheng Zihao.</p>
</footer>
</body>
</html>
这是quit.js
```javascript
var questions = [
{
question: "Which planet is known as the Red Planet?",
options: ["Jupiter", "Mars", "Venus", "Saturn"],
answer: "B"
},
{
question: "What is the capital of Australia?",
options: ["Sydney", "Melbourne", "Canberra", "Brisbane"],
answer: "C"
},
{
question: "Who painted the Mona Lisa?",
options: ["Leonardo da Vinci", "Pablo Picasso", "Vincent van Gogh", "Michelangelo"],
answer: "A"
},
{
question: "What is the largest ocean on Earth?",
options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
answer: "D"
},
{
question: "What is the main ingredient in guacamole?",
options: ["Tomato", "Avocado", "Onion", "Pepper"],
answer: "B"
},
{
question: "Who wrote 'Pride and Prejudice'?",
options: ["Emily Bronte", "Jane Austen", "Charlotte Bronte", "Louisa May Alcott"],
answer: "B"
},
{
question: "Which country is famous for the Great Wall?",
options: ["Japan", "China", "India", "Russia"],
answer: "B"
},
{
question: "What is the largest mammal?",
options: ["Elephant", "Blue whale", "Giraffe", "Hippopotamus"],
answer: "B"
},
{
question: "What is the capital of Brazil?",
options: ["Rio de Janeiro", "Brasília", "São Paulo", "Salvador"],
answer: "B"
},
{
question: "Who discovered penicillin?",
options: ["Alexander Fleming", "Marie Curie", "Louis Pasteur", "Robert Koch"],
answer: "A"
}
];
var startTime;
function startDate(){
startTime = new Date();
}
var endTime;
function endDate(){
endTime = new Date();
}
var inputName='';
function show(){
let div1obj=document.getElementById("div1");
let div2obj=document.getElementById("div2");
inputName = document.getElementById("welcome").value;
div1obj.style.display="none";
div2obj.style.display="block";
startDate()
}
var stop='F';
function startTimer() {
let timeLeft = 15; // 初始倒计时时间，单位为秒
document.getElementById("timer").innerText = "Time to answer: " + timeLeft + " seconds"; // 更新显示的倒计时时间
let timerInterval = setInterval(function () {
timeLeft--; // 每次执行时减少一秒
document.getElementById("timer").innerText = "Time to answer: " + timeLeft + " seconds"; // 更新显示的倒计时时间
if (timeLeft == 0) {
clearInterval(timerInterval);
selectionAnswer('F')//直接给个一定错误答案 弹出
}
if (stop=='T'){
clearInterval(timerInterval);
stop='F';
}
}, 1000); // 每隔一秒执行一次
}
var questionNo=1;
function renewal(){
let div2obj = document.getElementById("div2");
let div3obj=document.getElementById("div3");
let div4obj=document.getElementById("div4");
div3obj.style.display = "none";
div4obj.style.display = "none";
div2obj.style.display = "block";
document.getElementById("questionNo").innerText = 'Question'+questionNo;
document.getElementById("questionText").innerText = questions[questionNo - 1].question;
document.getElementById("btn2").innerText = 'A.'+ questions[questionNo - 1].options[0];
document.getElementById("btn3").innerText = 'B.'+ questions[questionNo - 1].options[1];
document.getElementById("btn4").innerText = 'C.'+ questions[questionNo - 1].options[2];
document.getElementById("btn5").innerText = 'D.'+ questions[questionNo - 1].options[3];
startTimer();
}
var selectedAnswer='';
function selectionAnswer(selection){
selectedAnswer = selection;
stop='T'
judgeAnswer();
questionNo = questionNo + 1;
}
function judgeAnswer(){
let answer=questions[questionNo-1].answer
let div2obj=document.getElementById("div2");
let div3obj=document.getElementById("div3");
let div4obj=document.getElementById("div4");
let div5obj=document.getElementById("div5");
div2obj.style.display="none";
if(selectedAnswer==answer) {
div3obj.style.display = "block";
numberQuestionsCorrectAnswer()
}
else {
div4obj.style.display = "block";
}
if(questionNo==10){
document.getElementById("btn6").style.display="none";
document.getElementById("btn7").style.display="none";
div5obj.style.display = "block";
}
}
var CorrectAnswer= 0;
function numberQuestionsCorrectAnswer(){
CorrectAnswer = CorrectAnswer+1;
if(questionNo==10){
document.getElementById("CorrectAnswer").innerText = "You got " + CorrectAnswer + " right out of 10.";
endDate();
var timeAnswered = (endTime-startTime)/1000;
document.getElementById("timeAnswered").innerText = inputName +' you use ' + timeAnswered + ' seconds to finish.';
saveUserData(inputName, CorrectAnswer, timeAnswered);
readLeaderboard();
}
}
function saveUserData(inputName, CorrectAnswer, timeAnswered) {
var users = JSON.parse(sessionStorage.getItem('users')) || [];
users.push({ name: inputName, correctAnswers: CorrectAnswer, timeTaken: timeAnswered });
sessionStorage.setItem('users', JSON.stringify(users));
}
function readLeaderboard(){
// 从本地存储中获取数组
var storedArray = JSON.parse(sessionStorage.getItem('users'));
storedArray.sort(function(a, b) {
if (b.correctAnswers !== a.correctAnswers) {
return b.correctAnswers - a.correctAnswers; // 降序
} else {
return a.timeTaken.toString().localeCompare(b.timeTaken.toString()); // 升序
}
});
// 获取输出元素
var outputDiv = document.getElementById('output');
// 创建一个列表来显示数组内容
var ul = document.createElement('ul');
// 遍历数组并将每个元素添加到列表中
storedArray.forEach(function(user) {
var li = document.createElement('li');
li.textContent = `Name: ${user.name}, CorrectAnswers: ${user.correctAnswers},timeTaken:${user.timeTaken}`;
ul.appendChild(li);
});
// 将列表添加到输出元素中
outputDiv.appendChild(ul);
}
