JavaScript写移动端答题网页程序

一、构思

1.一个完整的程序分为开始，中间内容，以及结束。
2.下面的程序也是：开始页面→答题页面（题目，选项）→结束页面

二、代码分解

1.HTML页面代码
（1）定义好每个模块的div，再从大模块里面进行细分。由于适配的是移动端的，所以需要 设置meta元素的viewport属性。
（2）方便代码的简洁，引用了外部样式表。为了方便JavaScript的调用和编写，传入了一个JQuery包，能够方便的进行方法调用。其中具体的样式，自己添加一个js的包进行编写。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=375,user-scalable=no"><link rel="stylesheet" type="text/css" href="css/css.css"/></head><body><!--开始页面--><div class="page startGame active"><button class="startBtn">开始答题</button></div><!--答题页面--><div class="page gaming"><!--题目--><h1 class="timu"></h1><!--选项--><div class="options"></div></div><!--结束页面--><div class="page endGame"><h1>恭喜您获取：<span class="score">100</span>分</h1><button class="reStart">重新答题</button></div><script src="js/jquery-1.11.0.js"></script><script src="js/zdy.js"></script></body>
</html>

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(`<div data-index="${index}">${index+1}.${item}</div>`)})}//选项的点击事件
$(".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;//每点击一次,答题的数量减1num --;//延迟一秒进行切换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.结束页面
每次选择都会进行统计，一共十题，最后把点击对的题目进行统计，显示分数

四、总结

其实代码并不多，重要的是理清楚思路，还是很容易能写出来。把模块划分，划分的越细，解决起来也越容易。遇到不了解，不清楚的代码，要多学会去查，去找。所谓“熟读唐诗三百首，不会写诗也会吟”，这样就算再难的知识点，就算你不能迎刃而解，也能做到心中有数。