乐易拍在线考试--模仿驾校考试

最新推荐文章于 2025-05-01 14:46:25 发布
转载 最新推荐文章于 2025-05-01 14:46:25 发布 · 135 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/huhai/archive/2011/04/10/2011103.html

本文介绍了一个使用ASP.NET 2.0开发的驾校考试系统的前端实现细节，包括倒计时功能、答案提交逻辑及页面元素交互等。

最近应朋友的需求，自己也正在找工作，想更提高、牢固自己做web系统的能力，所以做模仿驾校考试系统，花了几天时间。数据库表只有几个。

从09年毕业工作就一直用Java平台。asp.net是在学校学的。所以还是用2.0 的。Javascript封装设计的不够好，需要提高一下。

下载地址：http://code.google.com/p/leyipai/downloads/list

  用asp.net 2.0做系统自己感觉优点：开发速度快。

                                                部署成本低，小公司比较容易接受。

                                         缺点：就不说了。

前台考试的JS如下：

//考试倒计时
 var SysSecond;
 var InterValObj;
 function SysExamCountdown() {
  if (SysSecond > -1) {
   SysSecond = SysSecond - 1;
   var second = Math.floor(SysSecond % 60);             // 计算秒     
   var minite = Math.floor((SysSecond / 60) % 60);      //计算分
   var hour = Math.floor((SysSecond / 3600) % 24);      //计算小时

   $("#sysEaxmTimeTag").html( hour + "：" + minite + "：" + second + "");
  } else {//剩余时间小于或等于0的时候，就停止间隔函数
   window.clearInterval(InterValObj);
    $.blockUI({message:"考试时间到了"});//阴影
    
  }
 }


//考试参数
var singleSelet=true;//是多选的
var totalTopicNum=<%=totalTopicNums %>;//题目总数100

//考题
var eaxmtopics=<%=topics %>;


var userKeysArray=new Array(totalTopicNum);
//选中答案
function gotoKeys(text){
     if (SysSecond < 0) return;
    var topicId=$("#currentTopic").val();
	  //索引标题栏变色
	   var objgt="#EOV"+topicId;
	   $(objgt).removeClass();
	   $(objgt).addClass("ExamOrderViewVisited");
	   
	   
	var topicKeys=$("#currentTopicKeys").html();
	if(singleSelet){//单选考试
	    topicKeys=text;
	    $("#currentTopicKeys").html(text);
	     //保存用户答案
		userKeysArray[parseInt(topicId)]=topicKeys;

	    //提交给服务器
	    if("对"==topicKeys)topicKeys="Y";
	    if("错"==topicKeys)topicKeys="N";
	    var stuId=$("#HiddenStudentID").val();
	    var subId=$("#HiddenSubjectID").val();
	    var tid=eaxmtopics[parseInt(topicId)].TopicID;
	    $.ajax({
        type: "get",
        dataType: "json",
        url: 'submitMyKeys.ashx',
        data: "TopicID="+tid+"&Keys="+topicKeys+"&StudentID="+stuId+"&SubjectID="+subId,
        success: function(data) {
            
        }
        
        });
            
	   //进入下一题
	   gontoNext();
	   
	   
	 }else{//不是单选题
	 
			if(''==topicKeys){
			   topicKeys=text;
			}else if(topicKeys.indexOf(text)>=0){
			   topicKeys=topicKeys.replace(text,'');
			}else{
			  topicKeys=topicKeys+text;
			}
			topicKeys=sortKeys(topicKeys);
			$("#currentTopicKeys").html(topicKeys);
	}
	   

}

/*
* 排序
*/
var sortKeys =function (str){
   
   if(typeof(str) != "string")return "";
   var sarray=new Array(str.length);
   for(var i=0;i<str.length;i++){
     sarray[i]=str.charAt(i);
   }
   sarray.sort();
   var result=sarray.toString();
   return result.replace(/,/g,'');
};

//点击数字直达题干
var gotoTopic=function (index){
       $("#currentTopic").val(index);//保存当前ID
	   //遍历一下
	   checkDoneAndSetCss();
	   //标题栏变色
	   var objgt="#EOV"+index;
	   $(objgt).removeClass();
	   $(objgt).addClass("ExamOrderViewHover");
	   
	   //清空答案 currentTopicKeys
	   
	    
	    var obj=eaxmtopics[parseInt(index)-1];
	    $("#topicTexts").html(obj.Texts);
	    setKeysListStr(obj);
	    setKeysItem(obj);
}

//进入下一题
var gontoNext=function(){
      checkDoneAndSetCss();
      var ctopic=$("#currentTopic").val();
	  var nexttopic=parseInt(ctopic)+1;
	   if(nexttopic >totalTopicNum) nexttopic=totalTopicNum;
	  gotoTopic(nexttopic);
}
//进入上一题
var gotoPrevious=function(){
      checkDoneAndSetCss();
      var ctopic=$("#currentTopic").val();
	  var Prevtopic=parseInt(ctopic)-1;
	  if(Prevtopic<1)Prevtopic=1;
	  gotoTopic(Prevtopic);
}

//循环检查完成情况，而且给索引数字换样式
var checkDoneAndSetCss=function(){
    for(var i=0;i<userKeysArray.length;i++){
	  if(null==userKeysArray[i+1] || typeof(userKeysArray[i+1]) == "undefined" || ''== userKeysArray[i+1]){
	      var objge="#EOV"+(i+1);
	      $(objge).removeClass();
	      $(objge).addClass("ExamOrderViewWait");
	  }else if(''!=userKeysArray[i+1]){
	      var objge="#EOV"+(i+1);
	      $(objge).removeClass();
	      $(objge).addClass("ExamOrderViewVisited");
	  }
	}

}


//
//输出答案列表----就是题干下面的答案列表\
//
var setKeysItem=function(node){
     var restr="";
     if(0==node.Type){
	         if(null!=node.A && ''!=node.A ){
	           restr=restr+"<div class=\"keyitems\" id=\"Item_A\" onClick=\"gotoKeys('A')\">A</div>";
	         }
	         if(null!=node.B && ''!=node.B ){
	           restr=restr+"<div class=\"keyitems\" id=\"Item_B\" onClick=\"gotoKeys('B')\">B</div>";
	         }
	         if(null!=node.C && ''!=node.C ){
	           restr=restr+"<div class=\"keyitems\" id=\"Item_C\" onClick=\"gotoKeys('C')\">C</div>";
	         }
	         if(null!=node.D && ''!=node.D){
	           restr=restr+"<div class=\"keyitems\" id=\"Item_D\" onClick=\"gotoKeys('D')\">D</div>";
	         }
	         if(null!=node.E && ''!=node.E ){
	           restr=restr+"<div class=\"keyitems\" id=\"Item_E\" onClick=\"gotoKeys('E')\">E</div>";
	         }
        	 
	         if(null!=node.F && ''!=node.F ){
	           restr=restr+"<div class=\"keyitems\" id=\"Item_F\" onClick=\"gotoKeys('F')\">F</div>";
	         }
        	 
	         if(null!=node.G && ''!=node.G ){
	           restr=restr+"<div class=\"keyitems\" id=\"Item_G\" onClick=\"gotoKeys('G')\">G</div>";
	         }
	         if(null!=node.H && ''!=node.H ){
	           restr=restr+"<div class=\"keyitems\" id=\"Item_H\" onClick=\"gotoKeys('H')\">H</div>";
	         }
	         if(null!=node.I && ''!=node.I ){
	           restr=restr+"<div class=\"keyitems\" id=\"Item_I\" onClick=\"gotoKeys('I')\">I</div>";
	         }
	         if(null!=node.J && ''!=node.J){
	           restr=restr+"<div class=\"keyitems\" id=\"Item_J\" onClick=\"gotoKeys('J')\">J</div>";
	         }
	         if(null!=node.K && ''!=node.K ){
	           restr=restr+"<div class=\"keyitems\" id=\"Item_K\" onClick=\"gotoKeys('K')\">K</div>";
	         }
	   }else{
	   
	       restr=restr+"<div class=\"keyitems\" id=\"Item_Y\" onClick=\"gotoKeys('对')\">对</div>";
	       restr=restr+"<div class=\"keyitems\" id=\"Item_N\" onClick=\"gotoKeys('错')\">错</div>";
	   
	   }
	    $("#selectItem").html(restr);
	 }

//得到选择题的选项
  var setKeysListStr=function(node){
	    var restr="";
		if(node.Type==1){// 判断 return null
		   
		 }else  if(node.Type==0){
		      if(null!=node.A && ''!=node.A ){
	           restr=restr+"<p><font color=\"#993300\">A  </font>"+node.A+"</p>";
	         }
	         if(null!=node.B && ''!=node.B ){
	            restr=restr+"<p><font color=\"#993300\">B  </font>"+node.B+"</p>";
	         }
	         if(null!=node.C && ''!=node.C ){
	           restr=restr+"<p><font color=\"#993300\">C  </font>"+node.C+"</p>";
	         }
	         if(null!=node.D && ''!=node.D){
	           restr=restr+"<p><font color=\"#993300\">D  </font>"+node.D+"</p>";
	         }
	         if(null!=node.E && ''!=node.E ){
	           restr=restr+"<p><font color=\"#993300\">E  </font>"+node.E+"</p>";
	         }
        	 
	         if(null!=node.F && ''!=node.F ){
	          restr=restr+"<p><font color=\"#993300\">F  </font>"+node.F+"</p>";
	         }
        	 
	         if(null!=node.G && ''!=node.G ){
	           restr=restr+"<p><font color=\"#993300\">G  </font>"+node.G+"</p>";
	         }
	         if(null!=node.H && ''!=node.H ){
	           restr=restr+"<p><font color=\"#993300\">H  </font>"+node.H+"</p>";
	         }
	         if(null!=node.I && ''!=node.I ){
	           restr=restr+"<p><font color=\"#993300\">I  </font>"+node.I+"</p>";
	         }
	         if(null!=node.J && ''!=node.J){
	          restr=restr+"<p><font color=\"#993300\">J  </font>"+node.J+"</p>";
	         }if(null!=node.K && ''!=node.K){
	          restr=restr+"<p><font color=\"#993300\">K</font>"+node.K+"</p>";
	         }
		 
		 }
		 
		 $("#topicKeys").html(restr);
		 
		 
	  
	  }


 $(document).ready(function() {
     SysSecond =<%=examTime %> //这里我是在服务端算好了剩余的秒数，并保存到客户端，如果过期则返回0
     InterValObj = window.setInterval(SysExamCountdown, 1000); //间隔函数，1秒执行
	 //鼠标滑过样式
	 var objStr = ".keyitems";
	$(objStr).each(function(i){
		$(this).mouseover(function(){
			$(this).removeClass("keyitems");
			$(this).addClass("keyitems_over");
		});
		$(this).hover(function(){},function(){
		    $(this).removeClass("keyitems_over");
			$(this).addClass("keyitems");
		});	
		
		//gotoTopic('1');//
	});
	 
	 gotoTopic('1');
	 //alert('D'>'A');
 });

    

运行图片：

2011041008535311.jpg

2011041008550970.jpg

                             

转载于:https://www.cnblogs.com/huhai/archive/2011/04/10/2011103.html

乐易拍高拍仪M541Y扫描仪驱动程序v3.1.0官方版
08-05
乐易拍高拍仪M541Y扫描仪驱动程序是一款可以有效解决乐易拍高拍仪M541Y扫描仪在使用过程中出现的一些问题的驱动工具，本站提供了乐易拍高拍仪M541Y扫描仪驱动下载地址，有需要的朋友们可以前来下载使用。 乐易拍M541Y是一款高性能的高拍仪，主要用于办公人士使用，如果在使用过程中遇到了无法连接电脑或者无法使用的问题，可以先下载乐易拍M541Y驱动进行安装，安装后就可以正常使用了。 驱动安装教
乐易拍订单管理系统 v1.0
10-26
乐易拍信息平台主要为企业实现电子商务提供一个快捷的解决方案.通过本方案系统,可以加快开发速度,降低开发成本.搭建高效、稳定、可拓展的系统。 本系统运用asp.net 2.0开发，数据库使用SQL2000（可以放在SQL2005上），包括前台和后台两个部分。 前台主要运用jquery+CSS 构建的展示订购平台。 后台是运用CSS+EXTJS构建的一个完整的权限管理+销售订单管理的系统。主要功能： 地区信息设置 、用户信息管理 、系统角色管理 、系统仓库配置 、物流公司配置 、数据库备份 、 系统操作日志、 品牌管理 、类型管理 、商品添加 、商品管理 、销售客户管理 、销售订单管理 。 后台默认帐户密码： huhai/111111
乐易拍订单管理系统源代码
03-18
乐易拍信息平台主要为企业实现电子商务提供一个快捷的解决方案.通过本方案系统,可以加快开发速度,降低开发成本.搭建高效、稳定、可拓展的系统。 本系统运用asp.net 2.0开发，数据库使用SQL2000（可以放在SQL2005上），包括前台和后台两个部分。 前台主要运用j
乐易拍高拍仪a380扫描仪驱动程序v1.0官方安装版
08-05
乐易拍高拍仪a380扫描仪驱动程序是一款可以有效解决乐易拍高拍仪a380扫描仪在使用过程中出现的一些问题驱动工具，本站提供了乐易拍高拍仪a380扫描仪驱动下载地址，有需要的朋友们可以前来下载使用。 乐易拍高拍仪a38是一款高性能的文档扫描管理工具，适用于税务机关以及移动办公使用，小编提供的乐易拍高拍仪a38驱动由官方发布，安装后就可以正常使用了。 乐易拍A380特色 1.外观设计造型简单
乐易拍电子商务平台 v1.0.rar
07-09
乐易拍信息平台主要为企业实现电子商务提供一个快捷的解决方案.通过本方案系统,可以加快开发速度,降低开发成本.搭建高效、稳定、可拓展的系统。 本系统运用asp.net 2.0开发，数据库使用SQL2000（可以放在SQL2005上），包括前台和后台两个部分。 前台主要运用jquery CSS 构建的展示订购平台。 后台是运用CSS EXTJS构建的一个完整的权限管理 销售订单管理的系统。主要功能： 地区信息设置 、用户信息管理 、系统角色管理 、系统仓库配置 、物流公司配置 、数据库备份 、 系统操作日志、 品牌管理 、类型管理 、商品添加 、商品管理 、销售客户管理 、销售订单管理
JS逆向加密解密工具Crypto Magician、乐易助手、WT-JS 下载使用
EXIxiaozhou的博客
11-25 1万+
JS逆向加密解密工具Crypto Magician、乐易助手、WT-JS 下载使用
【软件编程】乐易贵宾VIP教程 - JS改写+网页操作系列教程
04-01 1394
JS改写系列教程： http://www.fu83.cn/thread-229-1-1.html 1、MD5加密改写教程（爱拍网登录） 2、解密如何快速找到真确的js加密算法 3、多重MD5加密改写教程（5173登录） 4、DZ论坛登录加密改写 5、唯品会手机登录加密改写 6、新浪微博密码加密改写 7、迅雷登录JS加密改写 8、QQ会员签到g_tk算法分析 9、QQ快捷登录分析  网页操作教程：  1、了解网页操作的基本分类和定义 2、了解抓包
2022春招面试题总结-C++方向
R君的博客
03-15 8281
文章目录多益笔试中望龙腾面试字节一面乐易公司面试记录小米vivo笔试完美世界一面二面智加一面米哈游一面二面腾讯一面 记录一下春招的面试笔试题，部分有答案，感触很深，面的还是很多的，到时候确定offer了会写一写春招经验 椭球公式 x2 / a2+y2 / b2+z2 / c2=1。 当x2/a2+y2/b2+z2/c2<1时　则点(x,y,z)在内部 反转链表 删除导数第N个数 总体很简单，有两个特殊的需要注意，第一是只有一个数或者零个数，第二个是需要删除的是第一个数 if(!head
易语言-拼多多商家后台登录源码
gitblog_06734的博客
05-01 302
易语言-拼多多商家后台登录源码 去发现同类优质开源项目:https://gitcode.com/ 此仓库提供了易语言编写的拼多多商家后台登录源码，其中包含crawlerInfo算法。该源码在实现登录功能的同时，调用了精易模块和乐易V8模块，为易语言开发者提供了一个学习与实践的优质资源。 功能特点 支持拼多多商家后台登录 内置crawlerInfo算法 调用精易模块和乐易V8模块 使用说明 下...
易语言x64-hook模块源码及实例大全
gitblog_06754的博客
04-23 462
易语言x64-hook模块源码及实例大全 【下载地址】易语言x64-hook模块源码及实例大全 易语言x64-hook模块源码及实例大全，为您提供丰富的x64_hook模块源码和实用hook实例，助您轻松掌握易语言的hook技术，提升开发效率。资源库包含x64_hook模块源码，支持二次开发和定制，同时提供多种hook实...
乐易拍订单管理系统.NET版 v1.0.rar
07-10
乐易拍信息平台主要为企业实现电子商务提供一个快捷的解决方案.通过本方案系统,可以加快开发速度,降低开发成本.搭建高效、稳定、可拓展的系统。 本系统运用asp.net 2.0开发，数据库使用SQL2000（可以放在SQL2005上）...
乐易助手-请求模拟-js本地运行.exe
11-05
请求模拟 js本地运行
【亲测免费】 易语言乐易模块V8.2源码
gitblog_09739的博客
09-06 578
易语言乐易模块V8.2源码 【下载地址】易语言乐易模块V8.2源码 本仓库提供了易语言乐易模块V8.2的源码，供开发者学习和参考。乐易模块是一个功能强大的易语言扩展模块，广泛应用于各种易语言开发项目中。通过本仓库，您可以深入了解乐易模块的内部实现，并根据自己的需求进行定制和扩展。 ...
全国大学生创新创业实践联盟-创新创业-按序学习：
热门推荐
HWP
02-16 1万+
全国大学生创新创业实践联盟-创新创业-按序学习： all： 商业模式设计过程： 顶层设计，具体化设计，组织化设计。 商业模式评价准则： 1，客户价值实现的程度： 该模式能够在多大程度上实现创业团队原本拟定为客户创造并传递的价值 2，客户价值实现的可靠性： 该商业模式能在多大程上为客户可靠的提供拟定的价值 3，客户价值实现的效率： 该商业模式为客户创造与传递的效率，即是价值创造和价值传递两个效...
PHP--数组
Cimiy_的博客
03-31 286
1.在PHP中创建数组 用array()函数来创建一个数组。 2.PHP中的数组类型 数值数组：带有数字ID键的数组。 $foodArr = array('菠萝','西兰花','芒果','苹果'); 关联数组：带有指定键的数组，每个键关联一个值。 $person = array('name' => '吴京','film' => '战狼', 'wife' => '谢楠'...
二维码工具(1).zip
最新发布
09-13
二维码工具(1).zip
基于ZXing修改的二维码扫描器.zip
09-12
基于ZXing修改的二维码扫描器.zip
在网页上生成二维码.zip
09-12
在网页上生成二维码.zip
乐易拍高拍仪A380扫描仪官方驱动下载
根据提供的信息，我们可以从标题、描述以及标签中提取出与“乐易拍高拍仪A380扫描仪驱动程序v1.0官方安装版”相关的一系列知识点。以下是对这些内容的详细解读： 标题解读： 标题提到了“乐易拍高拍仪A380扫描仪...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值