你的位置:首页 > Java教程

[Java教程]DOM技术实现竞赛题页面


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   }

六、实现效果

主要有三个界面:一个是题目界面;一个是正确答案的界面;一个是错误答案的界面。如下所示

 

题目界面

 

 

 

正确答案界面

 

错误答案界面

 说明:四个选项的间距没有调整好,还没掌握如何实现。

源码地址:https://github.com/1075237202/quiz.git

博客地址: https://www.cnblogs.com/Amanda-Xing/