js实现一个带进度条的问卷调查答题页面效果代码
代码语言:html
所属分类:布局界面
代码描述:js实现一个带进度条的问卷调查答题页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100%; background-color: #131319; font-family: monospace; margin: 0; } .form-c { height: 500px; width: 400px; padding: 15px; border-radius: 12px; background-color: #1c1c23; position: relative; } .progressBar { height: 40px; width: calc(100% - 60px); padding: 10px; background-color: #131319; border-radius: 6px; position: absolute; bottom: 15px; right: 50%; transform: translate(50%, 0%); display: flex; flex-direction: row; align-items: center; overflow: hidden; } .bar { height: 11px; width: 100%; background: #e6fff4; border-radius: 100px; } .bar-w { transition: all 0.6s ease-in-out; height: 100%; width: 0%; background-color: #00ff9c; border-radius: 100px; } .next { white-space: nowrap; transform: translateX(100px); width: 0; margin-left: auto; color: #cdcdcd; cursor: pointer; } .next:hover { color: #fff; } .qa { display: flex; flex-direction: column; } .q h3 { margin: 1.2em 0; font-size: 1.4em; color: #cdcdcd; } .a { display: flex; flex-direction: column; } .a-item { padding: 18px 10px; background-color: #131417; border-radius: 5px; color: #bdbdbd; margin: 0.35em 0; } .a-item:hover { background-color: #ffffff47; transition: all 0.5s ease-in-out; cursor: pointer; color: #fff; } .progressActive { transform: translateX(0px); width: auto; transition: transform 0.6s ease-in-out; } .start-game { background-color: #dddddd !important; color: #1c1c1c !important; font-size: 1em; } .result { display: flex; padding: 20px 0px; justify-content: space-between; border-bottom: 1px solid #333; color: #a0a0a0; align-items: center; flex-wrap: wrap; } .result-q { width: 200px; } </style> </head> <body > <div class="form-c"> <div class="qa"> <div class="q"> <h3 class="q-item"></h3> </div> <div class="a"> <div class="a-item start-game">Start Quiz</div> <!-- <div class="a-item">E36 M3</div> <div class="a-item">E92 M3</div> <div class="a-item">G80 M3</div> <div class="a-item">F80 M3</div> --> </div> </div> <div class="progressBar"> <div class="bar"> <div class="bar-w"></div> </div> <div class="next">Next Question</div> </div> </div> <script > const qa = [ { question: "when was Javascript created", correct: "1995", incorrect: ["1984", "2000", "1996", "1994"] }, { question: "react was originally created by...", correct: "Jordan Walke", incorrect: ["Kid Cudi", "Almero Steyn", "Jesse Beach", "Caleb Meredith"] }, { question: "what vehicle manufacturer builds the 911 GT3", correct: "Porsche", incorrect: ["BMW", "Bentley", "Mercedes AMG", "McClaren"] }, { question: "what styles a webpage", correct: "CSS", incorrect: ["HTML", "JSON", "SQL", "All"] }, { question: "how many data types does JavaScript have", correct: "Seven", incorrect: ["Three", "Four", "Two", "Eight"] }]; const answerContainer = document.querySelector(".a"); const questionCon = document.querySelector(".q"); const question = document.querySelector(".q-item"); const bar = document.querySelector(".bar"); const barContainer = document.querySelector(".progressBar"); const progressBar = document.querySelector(".bar-w"); const next = document.querySelector(".next"); const startBtn = document.querySelector(".start-game"); const questions = []; const player = { score: 0, answers: [] }; let cur = 0; const holder = []; (() => { loadQuestions(); // load questions immediately })(); function loadQuestions() { qa.forEach(e => { // loop through "qa" let temp = []; e.........完整代码请登录后点击上方下载按钮下载查看
网友评论0