zoukankan      html  css  js  c++  java
  • js动态生成选项之考试系统(一)

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    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:#fff6ed;
          font-family:"楷体";
          }
          
           #container{
            margin:0px auto;
           }
          
           #box{
              /* border:1px solid red; */
              overflow:hidden;
              
           }
           
           #box label{
           margin-top:5px;
           background:#cde6c7;
            width:80px;
            display:inline-block;
            text-align:right;
            margin-left:50px;
           }
        </style>
        <script type="text/javascript">
           //加载完所有的标签,图片和css后执行
            window.onload=function(){
              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">
             <!-- <fieldset>
              <legend>答题区 :本软件由微冷的雨出品!如有问题,请发送反馈信息到:yymqqc@126.com</legend> -->
              <div id="box">
                     
              </div>
             <!-- </fieldset> -->
         </div>
      </body>
    </html>
  • 相关阅读:
    1.Spring MVC详解
    servlet的九大内置对象
    Hibernate设置事务的隔离级别
    wamp下php报错session_start(): open(d:/wamp/tmpsess_ku776hvb06ko4lv9d11e7mnfj1, O_RDWR) failed: No such file or directory
    json_decode()相关报错
    wamp下var_dump()相关问题
    es6箭头函数内部判断
    Json数组对象取值
    npm指向淘宝源
    APICloud之封装webApp
  • 原文地址:https://www.cnblogs.com/weilengdeyu/p/4905490.html
Copyright © 2011-2022 走看看