【转】js实现上一题，下一题切换小demo
2021-04-19 16:28
阅读：558
YPE html>
标签：eve url ons 切换 add push rip round google
本来我的实现是类似分页，每次上一题，下一题，都去请求一下服务器数据，根据题目序号显示到页面上，但是这样子效率太低下，
这里的demo代码，直接等于是把所有的题目都请求了出来，然后JavaScript控制切换题目了，其实这样子效率可能会更高一点的感觉，感觉是比较好的实现方式了。
测验表2 测试表
${answers.join("")}
`
);
});
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join("");
}
function showResults() {
// gather answer containers from our quiz
const answerContainers = quizContainer.querySelectorAll(".answers");
// keep track of user‘s answers
let numCorrect = 0;
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
// if answer is correct
if (userAnswer === currentQuestion.correctAnswer) {
// add to the number of correct answers
numCorrect++;
// color the answers green
answerContainers[questionNumber].style.color = "lightgreen";
} else {
// if answer is wrong or blank
// color the answers red
answerContainers[questionNumber].style.color = "red";
}
});
// show number of correct answers out of total
resultsContainer.innerHTML = `你答对了${myQuestions.length}中的${numCorrect}`;
}
function showSlide(n) {
slides[currentSlide].classList.remove("active-slide");
slides[n].classList.add("active-slide");
currentSlide = n;
if (currentSlide === 0) {
previousButton.style.display = "none";
} else {
previousButton.style.display = "inline-block";
}
if (currentSlide === slides.length - 1) {
nextButton.style.display = "none";
submitButton.style.display = "inline-block";
} else {
nextButton.style.display = "inline-block";
submitButton.style.display = "none";
}
}
function showNextSlide() {
showSlide(currentSlide + 1);
}
function showPreviousSlide() {
showSlide(currentSlide - 1);
}
const quizContainer = document.getElementById("quiz");
const resultsContainer = document.getElementById("results");
const submitButton = document.getElementById("submit");
// display quiz right away
buildQuiz();
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;
showSlide(0);
// on submit, show results
submitButton.addEventListener("click", showResults);
previousButton.addEventListener("click", showPreviousSlide);
nextButton.addEventListener("click", showNextSlide);
})();
【转】js实现上一题，下一题切换小demo
标签：eve url ons 切换 add push rip round google
原文地址：https://www.cnblogs.com/EarlyBridVic/p/12268092.html
文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：【转】js实现上一题，下一题切换小demo
文章链接：http://soscw.com/index.php/essay/76735.html
文章标题：【转】js实现上一题，下一题切换小demo
文章链接：http://soscw.com/index.php/essay/76735.html
评论
亲，登录后才可以留言！