DOM技术实现竞赛题页面 这一段时间学习了DOM操作和JS开发，我就自己开发一个竞赛题的页面。一、业务需求1、目标：做一个一百道选择题的页面2、功能：显示题目和选项。下一题上一题的按钮，到第一题和第一百题时停止。答对了显示笑脸和笑话，答错了显示苦脸和正确答案。二、开发思路采用 ...
DOM技术实现竞赛题页面
这一段时间学习了DOM操作和JS开发，我就自己开发一个竞赛题的页面。
一、业务需求
1、目标：做一个一百道选择题的页面
2、功能：
- 显示题目和选项。
- 下一题上一题的按钮，到第一题和第一百题时停止。
- 答对了显示笑脸和笑话，答错了显示苦脸和正确答案。
二、开发思路
采用自顶向下法，分两步实现。第一步，实现题目显示和上一题下一题按钮，称为第一部分；第二步，显示提交按钮、笑脸／哭脸和笑话，称为第二部分。先实现界面再完成代码。
第一部分——界面，<p>显示标题<input radio>显示选项两个<img>分别显示左右箭头表示上一题和下一题。
第二部分——界面， <img>显示提交按钮，两个<img>显示哭脸和笑脸，<textarea>显示笑话或正确答案，在提交之前笑脸／哭脸和textarea都隐藏。
代码部分通过流程图来展示。
三、流程图
包含四段代码，分别是上一题、下一题和提交三个按钮，<body>的onload里面的初始化部分。
1、初始化的流程图：
2、上一题的流程图：
3、下一题的流程图：
4、提交的流程图：
四、技术储备
要实现这个效果需要了解html, js和DOM操作。 Html部分, 会用到<from>，<textarea>和<input><img>等标签；Js部分，了解基础操作，包括变量，条件判断和数组；DOM操作部分，需要getElementById，getElementsByTagName和innerHTML属性。
五、部分代码
1 function submit_quiz(){ 2 //checked_num用来定义四个选项中选择了哪一个 3 var checked_num="A"; 4 //radios用来保存所有的input数组 5 var radios=document.getElementsByTagName("input") 6 //checked==true用来判断选项是否为正确 7 if(radios[0].checked==true) checked_num="A" 8 else if(radios[1].checked) checked_num="B" 9 else if(radios[2].checked) checked_num="C"10 else checked_num="D";11 //表示如果选择的是当前题目的答案是正确的，就显示笑脸和当前笑话隐藏哭脸12 if(checked_num==quiz_answers[cur_quiz].substr(-1,1)) {13 document.getElementById("loser").hidden=true;14 document.getElementById("smile").hidden=false;15 document.getElementById("bonus").hidden=false;16 document.getElementById("bonus").value=quiz_bonus[cur_bonus]17 //cur_bonus==15 cur_bonus=0表示笑话显示到第16个就重新回到第1个（只有16个笑话）18 if(cur_bonus==15) cur_bonus=019 //用来判断当前是哪一个，如果题目没变是就不变，再按“提交”都没用20 else if(cur_quiz_bak==cur_quiz) return21 //表示否则当前笑话变为下一个，并且保留答对题的值，按“提交”也不跳转22 else{ cur_bonus+=1 ;cur_quiz_bak=cur_quiz;}23 24 }
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：DOM技术实现竞赛题页面
关键词：dom
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
