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属性。
五、部分代码
function submit_quiz(){
//checked_num用来定义四个选项中选择了哪一个
var checked_num="A";
//radios用来保存所有的input数组
var radios=document.getElementsByTagName("input")
//checked==true用来判断选项是否为正确
if(radios[0].checked==true) checked_num="A"
else if(radios[1].checked) checked_num="B"
else if(radios[2].checked) checked_num="C"
else checked_num="D";
//表示如果选择的是当前题目的答案是正确的，就显示笑脸和当前笑话隐藏哭脸
if(checked_num==quiz_answers[cur_quiz].substr(-1,1)) {
document.getElementById("loser").hidden=true;
document.getElementById("smile").hidden=false;
document.getElementById("bonus").hidden=false;
document.getElementById("bonus").value=quiz_bonus[cur_bonus]
//cur_bonus==15 cur_bonus=0表示笑话显示到第16个就重新回到第1个（只有16个笑话）
if(cur_bonus==15) cur_bonus=0
//用来判断当前是哪一个，如果题目没变是就不变，再按“提交”都没用
else if(cur_quiz_bak==cur_quiz) return
//表示否则当前笑话变为下一个，并且保留答对题的值，按“提交”也不跳转
else{ cur_bonus+=1 ;cur_quiz_bak=cur_quiz;}
}
六、实现效果
主要有三个界面：一个是题目界面；一个是正确答案的界面；一个是错误答案的界面。如下所示
题目界面
正确答案界面
错误答案界面
说明：四个选项的间距没有调整好，还没掌握如何实现。
源码地址：https://github.com/1075237202/quiz.git
博客地址： https://www.cnblogs.com/Amanda-Xing/
DOM技术实现竞赛题页面的更多相关文章
- DOM技术
DOM概述 DOM:Document Object Model(文档对象模型)(DOM核心就是 文档变对象,标签也变对象,属性也变对象,反正就是把标记文档拆散) 用来将标记型对象封装成对象,并将标记型 ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- XML：使用DOM技术解析xML文件中的城市，实现select级联选择
中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...
- 解决js动态改变dom元素属性后页面及时渲染问题
今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header ...
- PHP 自学之路-----XML编程（Dom技术）
上一节,讲了Xml文件基本语法及元素,实体及Dtd约束技术,下面就正式进入PHP的Xml编程 使用PHP技术对Xml文件进行操作 常用的有以下三种技术: 1.PHP dom 2.PHP结合XPath操 ...
- dom技术解析xml下jaxp解析器详细代码
1.使用jaxp实现查询操作 person.xml <?xml version="1.0" encoding="UTF-8" standalone=&qu ...
- webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2
js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...
- dom技术解析xml （php）
1.xml实例 test.xml <?xml version="1.0" encoding="utf-8"?><!DOCTYPE 班级 SYS ...
随机推荐
- NHibernate 映射失败 is not mapped
1 区分大小写(实体类名) 2 MAP的XML设置为嵌入的资源 3 hibernate.cfg.xml配置添加map的程序集<mapping assembly="Model" ...
- （转）SQL Server 性能调优（cpu）
摘自:http://www.cnblogs.com/Amaranthus/archive/2012/03/07/2383551.html 研究cpu压力工具 perfom SQL跟踪 性能视图 cpu ...
- memcached+magent实现memcached集群
首先说明下memcached存在如下问题 本身没有内置分布式功能,无法实现使用多台Memcache服务器来存储不同的数据,最大程度的使用相同的资源:无法同步数据,容易造成单点故障.(memagent代 ...
- JavaScript基础知识整理（2）
15.处理图像 注意:(1)在写js文件时,尽量将函数的声明往后写,将函数调用写在前面,这样能够使代码结构很清晰. (2)一个网页中翻转器一般超过3个,所以使用for循环减少重复使用翻转器代码的次数. ...
- C# 将sheet中数据转为list
public IList<T> ExportToList<T>(ISheet sheet, string[] fields) where T : class,new() { I ...
- Masonry记录——iOS适配
Masonry是iOS适配的第三方库,比较好用的一个,本人用的也不多,简单了解一些常用的方法,自己学习中,记录下来共勉. Masonry下载地址:https://github.com/SnapKit/ ...
- vi
e! 放弃所有修改,从上次保存文件开始再编辑 shift+g 最后一行 gg 第一行 u 恢复上一次操作 如果查找下一个,按"n"即可. set nu 显示行号 编辑模式下111g ...
- java开发常用工具
1.eclipse3.6 +浏览器插件+findbug+checkstyle+pmd+svn 2.plsql8.0对数据库的操作,存储过程的调试 3.Securecrt对linux服务器的操作 4.e ...
- Shell--用户配置
vim /etc/profileexport PS1='\[\e[1;33m\]\h\[\e[m\] \t [\[\e[1;36m\]\w\[\e[m\]] [\u] ' export LANG= ...
- IE WebBrowser事件触发
<= IE6: IE6 下如果iframe很多,子框架的BeforeNavigate2,DownloadBegin,DownloadComplete,DocumentComplete可能交替出现 ...