内容：JS包表单、JS验证表单

据说是一个测评系统，只能算是一个小Demo，很水，没有数据库，只用JS做一个简单的选择题测评系统

-

一、设计思路

表单包：

[1]由于在JS包中提交，不需要表单标签

[2]放置多个输入标签作为输入项

[3]编写JS获取输入项，通过get提交到另一个页面

检查表单(显示结果)

[1]获取由get传入的参数

[2]JS解析

[3]显示到相应的位置

-

二、参考源代码如下

request.html

htmlhead标题考试系统/title meta http-equiv=' accept-charset ' charset=' utf-8 '脚本src=' http : jquery。量滴js /脚本脚本类型='text/javascript '函数getjson(){ var radio=new Array()；for(var I=1；I=5；i ) {//获取收音机的值var radio _ name=new String(' radio _ I ')；收音机[I-1]=$('输入：收音机[名称=' radio _ name ']:已检查').val()} for(var I=1；I=2；i ) {//获取检验盒的的输入var checkbox_name=新字符串(“checkbox _ I”)；var chk _ value=[]；$('输入：复选框[名称=' checkbox _ name ']:复选框').每个（函数(){ chk_value.push($(this)).val())；});无线电[i4]=' '；//置为空for(var j=0；j chk _ value . length j){ radio[I 4]=radio[I 4]chk _ value[j]；} } //数组转json串var JSON=JSON。stringify(无线电)；返回json}函数my _ confirm(){ var JSON=getjson()；var msg='您真的答案是：“json”，是否确认提交；if(confirm(msg)=true){ window。位置。href='结果。html？收音机=' 5 '复选框=' 2 ' JSON=' JSON } else { return false } } $(function(){ var m=1；var s=10 setinterval(function(){ if(m=0){ if(s ^ 10){ $(' # time '))).html(")剩余时间：' m ' :0s)；} else { $('#time ').html(")剩余时间：' m ' :s)；} s-；if(s 0){ s=59；m-；} if(m==0s 1){ window。位置。href='结果。html？收音机=' 5 '复选框=' 2 ' JSON=' getJSON()；} } }，1000)})/脚本/头dyh 3 style=' float : left ' 2016-2017学年期末测试题/h3div id=' time ' style=' color : red；向右浮动：margin : 12px 20px 0 0 padd : 0 0 font-size : xx-large/div br/br/HR/H4一、单选题（每题12分，满分60分)/h41 .当方法遇到异常又不知如何处理时，下列() 做法是正确的br输入类型=' radio '名称=' radio _ 1 '值=' A ' A，捕获异常br输入类型=' radio '名称=' radio _ 1 '值=' B ' B，抛出异常br输入类型=' radio '名称=' radio _ 1 '值=' C ' C，声明异常br输入类型=' radio '名称=' radio _ 1 '值=' D ' D，嵌套异常br2 .下列说法错误的是()br输入类型=' radio ' name=' radio _ 2 '值=' A ' A，在爪哇岛中一个类被声明为最后的类型，表示该类不能被继承br输入类型=' radio '名称=' radio _ 2 '值=' B ' B，当一个对象被当作参数传递到一个方法后，此方法可改变这个对象的属性，这叫引用传递br输入类型=' radio '名称=' radio _ 2 '值=' C ' C，一个类不能既被声明为抽象的，又被声明为决赛。 br输入类型=' radio '名称=' radio _ 2 '值=' D ' D，方法的覆盖（覆盖)和重载（超载)是爪哇多态性的表现，他们没有区别br3。下列创建数组的方法哪个是错误的？br输入类型=' radio '名称=' radio _ 3 '值=' A ' A，Date[]arr=新日期[5]；br输入类型=' radio '名称=' radio _ 3 '值=' B ' B、Date arr[]=new Date[]；br输入类型=' radio '名称=' radio _ 3 '值=' C ' C，Date arr[][]=新日期[4][5]；br输入类型=' radio '名称=' radio _ 3 '值=' D ' D，Date arr[][]=新日期[4][]；br4 .在读文件Employee.txt时，可以直接使用该文件作为参数的类是()布林普特类型=' radio '名称=' radio _ 4 '值=' A ' A，BufferedReaderbrinput类型=' radio '名称=' radio _ 4 '值=' B ' B，FileInputStreambrinput类型=' radio '名称=' radio _ 4 '值=' C ' C，DataOutputStreambrinput类型=' radio '名称=' radio _ 4 '值=' D ' D，DataInputStreambr5 .下列关于线程的说法中，错误的是？br输入类型=' radio '名称=' radio _ 5 '值=' A ' A，线程必须通过方法开始()来启动br输入类型=' radio '名称=' radio _ 5 '值=' B ' B，线程创建后，其优先级是可以改变的。

br输入类型=' radio ' name=' radio _ 5 ' value=' c ' c，实现Runnable接口的thread类或从Thread类派生的Thread类之间没有区别。br input type=' radio ' name=' radio _ 5 ' value=' d ' d，当用synchronized修改对象时，意味着对象在任何时候只能被一个线程访问。Brbr/h4 II。选择题(每题20分，满分40分，错选、少选、选择题不得分)/h46。以下语句是正确的：()br input type=' checkbox ' name=' checkbox _ 1 ' value=' a ' a，一个类在java中被声明为最终类型，这意味着它不能被继承。br input type=' checkbox ' name=' checkbox _ 1 ' value=' b ' b，当一个对象作为参数传递给一个方法时，这个方法可以改变这个对象的属性，这叫做引用传递。br input type=' checkbox ' name=' checkbox _ 1 ' value=' c ' c，类不能同时声明为抽象类和最终类。br input type=' checkbox ' name=' checkbox _ 1 ' value=' d ' d，方法的Overriding和Overloading是Java多态性的表现，两者没有区别。Br7。当方法遇到异常并且不知道如何处理它时，下面的()方法是不正确的。brink put类型=' checkbox' name=' checkbox _ 2 '值=' a' a，捕捉异常brink put类型=' checkbox' name=' checkbox _ 2 '值=' b' b，抛出异常br输入类型=' checkbox' name=' checkbox _ 2 '值=' c' c，异常声明为br输入类型=' checkbox' name=' checkbox _ 2 '值=' d' d，嵌套异常brhr/输入类型=' button' onclick=' my _ confirm()'值='考试已完成'/body/html -。

result.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题考试结果/title脚本src=' http : jquery。量滴js/获取全球资源定位器(统一资源定位符)中的参数函数getUrlParam(名称){ var reg=新RegExp('(^|)'名称'=([^]*)(|$)');//构造一个含有目标参数的正则表达式对象var r=窗口。位置。搜索。substr(1).match(reg)；//匹配目标参数if (r！=null)返回unescape(r[2])；返回null/返回参数值}函数showResult() { var答案=['B '，' D '，' B '，' D '，' ABC '，' ACD ']；//标准答案var answer_score=[12，12，12，12，20，20]；//答案的分数var user _ answer=JSON。解析(getUrlParam(' JSON '))；//获取用户答案var radio _ num=ParSeint(GetURlparam(' radio '))；//获取单选个数var checkbox _ num=Parsent(getUrlParam(' checkbox '))；//获取多选个数var radio _ result=0；//单选分数var checkbox _ result=0；//多选分数var radio _ right _ num=0；//单选答对个数var checkbox _ right _ num=0；//多选答对个数定义变量结果=0;//总分数var user _ answer _ result=new Array()；//用户没到题的答题情况for(var I=0；I user _ answer . lengthi){ if(user _ answer[I]==answer[I]){ if(I radio _ num){ radio _ result=radio _ result answer _ score[I]；radio _ right _ num } else { checkbox _ result=checkbox _ response _ score[I]；checkbox _ right _ num } user _ answer _ result[I]='正确；} else { user_answer_result[i]='错误；} } result=checkbox _ result radio _ result；//结果展示var show _ result 1 var show _ result 2 var show _ result 3 var show _ result 4 var show _ result 5 var show _ result 6 show _ result 1='你的答案结果为：';for(var I=0；I user _ answer . lengthi){ show _ result 1=show _ result 1(I 1)':' user _ answer _ result[I]'；} show_result2='总题目个数：“user _ answer . length show _ result 3=”答对单选题题目个数：“radio _ right _ num”；得分：“radio _ resultshow_result4=”答对多选题题目个数：“checkbox _ right _ num”；得分：“checkbox _ resultshow_result5=”答错题目个数：'(user _ answer。length-radio _ right _ num-checkbox _ right _ num)；show_result6='本次考试总成绩为：'结果；$('p#show_result1 ').html(show _ result 1)；$('p#show_result2 ').html(show _ result 2)；$('p#show_result3 ').html(show _ result 3)；$('p#show_result4 ').html(show _ result 4)；$('p#show_result5 ').html(show _ result 5)；$('p#show_result6 ').html(show _ result 6)；}/脚本/标题dyh 2考试结束！/h2hr/input type=' button ' onclick=' showResult()' value='查看结果p id=' show _ result 1 ' phr/p id=' show _ result 2 '/PP id=' show _ result 3 '/PP id=' show _ result 4 '/PP id=' show _ result 5 '/phr/p id=' show _ result 6 '/p/body/html结果如下图：

总结

以上所述是小编给大家介绍的射流研究…实现简单的选择题测评系统代码思路详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！