| JavaScript写移动端答题网页程序 | 您所在的位置：网站首页 › 网页答题器 › JavaScript写移动端答题网页程序 |
JavaScript写移动端答题网页程序
|
一、构思
1.一个完整的程序分为开始，中间内容，以及结束。 2.下面的程序也是：开始页面→答题页面（题目，选项）→结束页面 二、代码分解1.HTML页面代码 （1）定义好每个模块的div，再从大模块里面进行细分。由于适配的是移动端的，所以需要 设置meta元素的viewport属性。 （2）方便代码的简洁，引用了外部样式表。为了方便JavaScript的调用和编写，传入了一个JQuery包，能够方便的进行方法调用。其中具体的样式，自己添加一个js的包进行编写。 开始答题 恭喜您获取：100分 重新答题2.css样式表 该样式仅做参考，具体可根据需要进行调整 *{ margin: 0; padding: 0; /*设置不会因为内边距和 边框撑开宽度和高度*/ box-sizing: border-box; } html,body{ /*溢出隐藏*/ overflow: hidden; width: 100%; height: 100%; background: skyblue; } .page{ width: 375px; height: 100%; /*三个页面都重叠到一起*/ position: absolute; left: 0; top: 0; background: skyblue; transform: translateX(375px); transition: all 1s; } .active{ /*!important让这个权限变高覆盖上面的，进行偏移*/ transform: translateX(0px) !important; } .startGame{ display: flex; justify-content: center; align-items: center; } .startBtn{ width: 200px; height: 60px; line-height: 60px; font-size: 30px; border: none; background: green; color: #fff; /*阴影不进行偏移 */ box-shadow: 0 0 30px green; border-radius: 10px; } .gaming{ background: coral; padding: 40px 20px; } .gaming h1{ margin: 20px 0px; font-size: 24px; color: #fff; } .gaming .options>div{ margin: 10px 10px; padding: 5px 10px; color: #fff; border-radius: 7px; } /*正确显示的颜色*/ .correct{ background: green; } /*错误显示的颜色*/ .error{ background: red; } /*结束页面*/ .endGame{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .endGame h1{ margin: 40px; } .reStart{ width: 200px; height: 60px; line-height: 60px; font-size: 30px; border: none; background: green; color: #fff; /*阴影不进行偏移 */ box-shadow: 0 0 30px green; border-radius: 10px; }3.自定义JavaScript代码 里面有较为详细的说明，可以根据具体功能，进行修改。 var tikuList = []; var currenTimu = {}; var score = 0; //是否还能继续选择 var isChoose = false; //设置答题数量 var num = 10; //ajax获取题目内容 $.get("dati.json",function(res){ //用了jquery相当于res = JSON.parse(res.responseText) //自动获取响应数据以字符串形式返回，不用自己多写这一句 console.log(res) //把获取到的所有数据放入数组中 tikuList = res }) //点击开始答题按钮切换页面 $(".startBtn").click(function(e){ $(".gaming").addClass("active") $(".startGame").removeClass("active") //每次点击随机出个题目并显示在页面上 randomRender() }) function randomRender(){ //获取题库数组中，随机出的整数(pasetInt)索引值 parseInt方法 返回由字符串转换得到的整数。 var randomIndex = parseInt(Math.random()*tikuList.length); //每次拿出一个题目放到一个对象里，并把这个题目从数组中删除 //这个题目对象是一个数组，所以写个0获取当前对象 currentTimu = tikuList.splice(randomIndex,1)[0]; console.log(currentTimu); //获取页面标签题目，并把对象字符串中的quiz（题目）设置显示在页面上 $(".timu").html(currentTimu.quiz) //每次执行清空一次 $(".options").html(""); //遍历题目对象字符串中的选择options内容 内容 索引 currentTimu.options.forEach(function(item,index){ $(".options").append(`${index+1}.${item}`) }) } //选项的点击事件 $(".options").click(function(e){ if(!isChoose){ //把索引值转成数字 parseInt方法 返回由字符串转换得到的整数。 var index = parseInt(e.target.dataset.index); console.log(index+1); //题目中的index是0开始,answer是1开始,所以要加一 //若答案与点击按钮的索引一致 if(currentTimu.answer==(index+1)){ score += 10; //把获取的索引添加正确的背景颜色 $("[data-index="+index+"]").addClass("correct") }else{ var corectindex = currentTimu.answer-1; //若点击的索引不对,把正确的背景颜色和错误的背景颜色都显示出来 $("[data-index="+corectindex+"]").addClass("correct") $("[data-index="+index+"]").addClass("error") } isChoose = true; //每点击一次,答题的数量减1 num --; //延迟一秒进行切换 setTimeout(function(){ //答题数量结束了,切换到结束页面,否则切换到下一题 if(num==0){ $(".endGame").addClass("active") //获取得分标签,把上面累计的得分设置显示到页面上 $(".score").html(score); }else{ isChoose = false; randomRender() } },1000) } }) //点击重新答题按钮后,重新刷新页面进行重新答题 $(".reStart").click(function(){ //location.reload() DOM方法 刷新页面 location.reload() }) 三、效果展示1.开始页面 点击答题按钮，开始答题 其实代码并不多，重要的是理清楚思路，还是很容易能写出来。把模块划分，划分的越细，解决起来也越容易。遇到不了解，不清楚的代码，要多学会去查，去找。所谓“熟读唐诗三百首，不会写诗也会吟”，这样就算再难的知识点，就算你不能迎刃而解，也能做到心中有数。 |
2.答题页面 若点击正确，背景颜色显示为绿色。 若点击错误，把对的答案显示为绿色，自己点击错误的显示为红色 
3.结束页面 每次选择都会进行统计，一共十题，最后把点击对的题目进行统计，显示分数 
【本文地址】
公司简介
联系我们