javascript - 如何用 JS 或 Jquery 创建动态进度条?
问题描述
我创建了一些测验,我想创建一个动态进度条,因此当您在每个测验结束时单击“完成”时,它会为进度条增加 20%。因此,当所有 5 次测验都完成时,它达到 100%。但是,我不确定如何在 jQuery 或 js 中执行此操作,这是我目前的代码。我有 5 个格式相同的 js 文件,只是数组中有不同的问题,我只是在下面链接了一个。
HTML
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<a href="home.html"><button id="complete-btn" class="complete-btn btn hide">Complete</button></a>
</div>
</div>
JS
$(document).ready(function() {
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const completeButton = document.getElementById('complete-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
function startGame() {
startButton.classList.add('hide')
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
completeButton.innerText = 'Complete'
completeButton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
var totalQuizes = 5;
// run this either on page load, or dynamically when you have a new percentage to update
$(function(){
$("#NumberComplete #percent").css( {"width": (numberComplete / totalQuizes) * 100 + "%" } );
});
const questions = [
{
question: 'What does HTML stand for?',
answers: [
{ text: 'Hyperlinks and Text Markup Language', correct: true },
{ text: 'Hyper Text Markup Language', correct: false },
{ text: 'Home Tool Markup Language', correct: false }
]
},
{
question: 'Which character is used to indicate an end tag?',
answers: [
{ text: '<', correct: false },
{ text: '*', correct: false },
{ text: '/', correct: true },
{ text: ';', correct: false }
]
},
{
question: 'Who is making the Web standards?',
answers: [
{ text: 'Google', correct: false },
{ text: 'Mozilla', correct: false },
{ text: 'Microsoft', correct: false },
{ text: 'The World Wide Web Consortium', correct: true }
]
},
{
question: 'What is the correct HTML for making a text input field?',
answers: [
{ text: '<input type="textfield">', correct: false },
{ text: '<input type="text">', correct: true },
{ text: '<textfield>', correct: false },
{ text: '<textinput type="text">', correct: false }
]
},
{
question: 'Choose the correct HTML element for the largest heading:',
answers: [
{ text: '<head>', correct: false },
{ text: '<h6>', correct: false },
{ text: '<heading>', correct: false },
{ text: '<h1>', correct: true }
]
}
]
});
解决方案
您可以主要使用带有一点 Jquery 的 css。创建一个全宽 div,里面有一个 div 来表示你的进度条,比如这个
<div class="progress-bar-container" style="100%">
<div id="my-progress-bar" class="progress-bar" style="width:0%;height:20px"></div>
</div>
然后使用 Jquery,您可以将进度条的宽度设置为您想要的百分比。
$('#my-progress-bar').css('width', '20%')
然后根据需要设置样式,将背景颜色添加为红色或使其更加华丽,您可以添加一些过渡以对其进行动画处理
推荐阅读
- c# - 如何对从较大的 XDocument 中提取的 XElement 执行 XPath 选择?
- javascript - 当我向选定列中的单元格添加值时,我希望它复制到另一个 Google 表格
- css - 在可变大小的框中调整图像大小并保持纵横比
- python - 交互式绘图 Jupyter Lab 2.0
- android - JSON 格式的 Android Volley 数组
- reactjs - 成帧器运动 | 在最后一个动画加载后视点“useAnimation”触发
- c# - SqlException:INSERT 语句与使用 EF 代码优先 C# 的 FOREIGN KEY 约束冲突
- javascript - 为什么我无法填充帖子字段?
- javascript - 根据当前月份打开特定选项卡
- python - Python:递归获取二维数组的排列