码迷,mamicode.com
首页 > Web开发 > 详细

js封装用户选项传递给Servlet之考试系统二

时间:2015-10-30 07:04:27      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>微冷的雨考试成绩统计系统</title>
    <style type="text/css">
    
      body{
      font-size:30px;
      background:#DAE4F6;
      font-family:"楷体";
      }
      
       #container{
        margin:0px auto;
       }
      
       #box{
          /* border:1px solid red; */
          overflow:hidden;
        margin:0px auto;
       }
       
       #box label{
       margin-top:5px;
       background:#B0E0E6;
        width:80px;
        display:inline-block;
        text-align:right;
        margin-left:50px;
       }
    </style>
    <script type="text/javascript">
    //获取用户已经做了的题目
     //获取所有的复选框
     var data=new Array();  
      function selectCheckBox(){
       //定义一个字典保存题目编号和用户填写的答案
        
      /*   data.push=function(o){  
            //如果o是object  
            if(typeof(o)==‘object‘) for(var p in o) this[p]=o[p];  
        }; */
        
       // data.push({2:"A"});
         //alert(data.a)  
        var selectnum = 0;
          var mycheckboxs = document.getElementsByTagName("input");//获取所有的input标签对象
        var checkboxArray = [];//初始化空数组,用来存放checkbox对象。
        for(var i=0;i<mycheckboxs.length;i++){
          var obj = mycheckboxs[i];
          if(obj.type==checkbox){
             checkboxArray.push(obj);
          }
        }
        for(var i=0;i<checkboxArray.length;i++){
           if(checkboxArray[i].checked){
              //选择了某个复选框
               selectnum++;
               //复选框提交的文本
               var tidAndAnswer=checkboxArray[i].value;
               var myarray=tidAndAnswer.split(":");
                //题目
               var tid = parseInt(myarray[1]);
                //答案
               var useranswer = myarray[0];
               var flag=false;
               data[0] = "";
               //看题目编号是否已经被记录
               for ( var item in data) {
                   if(item!=0){
                      if(item==tid){
                         data[item]=data[item]+useranswer;
                         flag=true;
                         break;
                      }
                   }
               }
               if(flag==false){
                  //data.push({tid:useranswer});
                  data[tid]=tid+":"+useranswer;
               }
               
           }
        }
        
        //
        if (selectnum==0){
            alert(请至少做一道题目);
            return false;
        }else{
          return true;
        }
        //
       }
       //表单校验
       
       function checkName(){
         var txtName=document.getElementById("txtName");
         if(txtName.value==""||txtName.value==null){
            alert(请输入姓名);
            return false;
         }
         return true;
       }
    
    
    
       //加载完所有的标签,图片和css后执行
        window.onload=function(){
        
        
        
        var myform=document.getElementById("form1");
        var mydata=document.getElementById("selectData");
            myform.onsubmit=function(){
             var mycount=0;
            if(!checkName()){
               mycount--;
            }else{
              if(!selectCheckBox()){
               mycount--;
               }
            }
            
            if(mycount==0){
            //var str = JSON.stringify(data); 
            //alert(str);
               mydata.value=data;
               return true;
            }else{
              return false;
            }
            
       };
        
        
        
        
          var row=15;
          var col=2;
         var mybody=document.getElementById(mybody);
         if(col>4){
           mybody.style.width=document.body.scrollWidth+(col-4)*350;
         }
          
         //mybody.style.width="3333px";
          initOptions(row,col);
          //alert(body.documentElement.clientWidth);
        // document.body.scrollWidth=3333;
          var cbxs=document.getElementsByName("rchoice");
          for ( var i = 0; i < cbxs.length; i++) {
             cbxs[i].style.cssText="margin-left:20px;";
          }
        };
        //动态加载答题区控件!
        function initOptions(row,column){
           var box=document.getElementById(box);
           //题目编号,从0开始
            var count = 0;
            var mytag; //CheckBox的Tag属性值
           //
            for (var i = 1; i <=row ; i++){  //默认i的值为15
                count++;
                 var mydiv=document.createElement("div");
                  box.appendChild(mydiv);
                  //mydiv.style.border="1px solid blue";
                  // mydiv.style.paddingRight="700px";
                   mydiv.style.overflow="auto";
                for (var j = 1; j <=column; j++){   //默认j的值为2
                     //创建一个label
                    var label=document.createElement(label);
                    
                      //设置座位号
                    if (j == 1)
                    {
                        label.innerHTML = count+ "";
                         mytag = count;
                    }
                    else
                    {
                        //多列的情况下创建题目编号的方式
                        label.innerHTML = (count +row*(j-1)) + "";
                        mytag = count + row*(j-1);
                    }
                    var littlediv=document.createElement("div");
                    littlediv.style.float="left";
                    
                    //littlediv.style.border="3px solid blue";
                    mydiv.appendChild(littlediv);
                    littlediv.appendChild(label);
                    //创建四个选项
                    var checkbox1=document.createElement("input");
                    checkbox1.setAttribute("type","checkbox");
                    checkbox1.setAttribute("value","A:"+mytag);
                    checkbox1.setAttribute("name","rchoice");
                    var cbtxt=document.createTextNode("A");
                    littlediv.appendChild(checkbox1);
                    littlediv.appendChild(cbtxt);
                   
                    //第二个checkbox
                      var checkbox2=document.createElement("input");
                    checkbox2.setAttribute("type","checkbox");
                    checkbox2.setAttribute("value","B:"+mytag);
                    checkbox2.setAttribute("name","rchoice");
                    var cbtxt2=document.createTextNode("B");
                    littlediv.appendChild(checkbox2);
                    littlediv.appendChild(cbtxt2);
                    //第三个checkbox
                      var checkbox3=document.createElement("input");
                    checkbox3.setAttribute("type","checkbox");
                    checkbox3.setAttribute("value","C:"+mytag);
                    checkbox3.setAttribute("name","rchoice");
                    var cbtxt3=document.createTextNode("C");
                    littlediv.appendChild(checkbox3);
                    littlediv.appendChild(cbtxt3);
                    
                     //第四个checkbox
                      var checkbox4=document.createElement("input");
                    checkbox4.setAttribute("type","checkbox");
                    checkbox4.setAttribute("value","D:"+mytag);
                    checkbox4.setAttribute("name","rchoice");
                    var cbtxt4=document.createTextNode("D");
                    
                    littlediv.appendChild(checkbox4);
                    littlediv.appendChild(cbtxt4);
                    var myline=document.createElement("br");
                   
                    if(j==column){
                        mydiv.appendChild(myline);
                    }
              }
           }
           
        }
        
    </script>
  </head>
  
  <body id="mybody">
     <div id="container">
      <div id="box">
              
              </div>
        <form action="${pageContext.request.contextPath}/SaveServlet?action=save" method="post" id="form1">
              
             <!-- <fieldset>
              <legend>答题区 :本软件由微冷的雨出品!如有问题,请发送反馈信息到:yymqqc@126.com</legend> -->
             
             <div id="tool">
                   <label for="txtRow" >行:</label><input id="txtRow" type="text" style="width:50px;"/>
                   <label for="txtColumn" >列:</label><input id="txtColumn" type="text" style="width:50px;"/>
                   <input type="button" value="生成"/>
                   <label for="txtName" >姓名:</label><input id="txtName" name="txtName" type="text"/>
                   <c:if test="${not empty errors && not empty errors[‘txtName‘]}">
                                <span class="error">${errors[‘txtName‘]}</span>
                            </c:if>
                            <c:if test="${empty errors || empty errors[‘txtName‘]}"><span></span></c:if>
                   <input type="submit" value="提交"/>
              </div>
              <input type="hidden" id="selectData" name="selectData" value=""/>
       </form> 
         <!-- </fieldset> -->
     </div>
  </body>
</html>

 

js封装用户选项传递给Servlet之考试系统二

标签:

原文地址:http://www.cnblogs.com/weilengdeyu/p/4922281.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!