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技术实现竞赛题页面的更多相关文章

  1. DOM技术

    DOM概述 DOM:Document Object Model(文档对象模型)(DOM核心就是 文档变对象,标签也变对象,属性也变对象,反正就是把标记文档拆散) 用来将标记型对象封装成对象,并将标记型 ...

  2. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  3. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  4. XML：使用DOM技术解析xML文件中的城市，实现select级联选择

    中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...

  5. 解决js动态改变dom元素属性后页面及时渲染问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header ...

  6. PHP 自学之路-----XML编程（Dom技术）

    上一节,讲了Xml文件基本语法及元素,实体及Dtd约束技术,下面就正式进入PHP的Xml编程 使用PHP技术对Xml文件进行操作 常用的有以下三种技术: 1.PHP dom 2.PHP结合XPath操 ...

  7. dom技术解析xml下jaxp解析器详细代码

    1.使用jaxp实现查询操作 person.xml <?xml version="1.0" encoding="UTF-8" standalone=&qu ...

  8. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

  9. dom技术解析xml （php）

    1.xml实例 test.xml <?xml version="1.0" encoding="utf-8"?><!DOCTYPE 班级 SYS ...

随机推荐

  1. shell编程之流程控制

    -d 判断该文件是否存在,并且是否为目录文件 -e 判断该文件是否存在 -f 判断该文件是否存在,并且是否为普通文件 形式 [ -e   /home/cao/test.txt ] -r 文件 判断该文 ...

  2. OO基本原则

    1. 单一职责原则(SRP)     一个类应该最多只能有一个因素能够给导致其变化,类中的方法应该都是相关性很高的,即"高内聚"   2. 开放-封闭原则(OC)      - 扩 ...

  3. C# Winform学习---MDI窗体的设计,PictureBox控件（图片上一页下一页）,Timer控件,MenuStrip控件

    一.MDI窗体的设计 1.MDI简介 MDI(Multiple Document Interface)就是所谓的多文档界面,与此对应就有单文档界面 (SDI), 它是微软公司从Windows 2.0下 ...

  4. Excel列名 字母和数字的转换

    Excel的列名是由于字母组成的. A-Z 分别代表1-26  AA 是27 AB是28 以此类推. 以下是这种编码的转换方法,如果遇到需要用纯字母编号来表示数字的时候可以用到. /** * 类似EX ...

  5. windows 下ssh 客户端

    今天用 xshell 和 bitvise ssh 在 windows 登录SSH ,发现 vi 一些中文内容的文件会出现乱码,配置无效,在网上找到一款不会中文乱码的SSH客户端 MobaXterm , ...

  6. XAF学习笔记之-多表头设计

    空闲之余,看了下全英文的DEV 的XAF帮助文档,一半的英文我认识他,一半的英文他认识我,反正拆开成26个字母我全认识 不那么啰嗦了,先看效果 如何做:分以下几步 第一步:打开这个文件,这个文件就是X ...

  7. Debian 7(Linux) 安装SSH使用SecureCRT连接配置

    1 Debian 安装 ssh2 首先确保你的Debian或者linux安装ssh并开启ssh服务 Debian和ubuntu的安装方法一样,只要源OK的话,可以直接安装 apt-get instal ...

  8. Hadoop2.6.0的事件分类与实现

    前言 说实在的,在阅读Hadoop YARN的源码之前,我对于java枚举的使用相形见绌.YARN中实现的事件在可读性.可维护性.可扩展性方面的工作都值得借鉴. 概念 在具体分析源码之前,我们先看看Y ...

  9. TaskScheduler的启动

    <深入理解Spark:核心思想与源码分析>一书前言的内容请看链接<深入理解SPARK:核心思想与源码分析>一书正式出版上市 <深入理解Spark:核心思想与源码分析> ...

  10. 读书笔记——body and html

    在看<常见标签的默认属性值及相互作用——关于CSS reset的思考>的时候,其中说body默认的margin是8px.但是,将body的backgound-color:red:后,看到的 ...