<%@ 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>

js动态生成选项之考试系统(一)的更多相关文章

  1. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  2. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  3. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  4. 2）JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  5. qrcode.js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  6. js 动态生成html 触发事件传参字符转义

    通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 “单.双引号不够用” 的情况,别急,这时可以利用 html 语言中的转义字符来解决.下面就来 ...

  7. 爬虫案例(js动态生成数据)

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  8. JS 动态生成JSON对象

    JS 动态生成JSON对象,一般用到JSON传递参数的时候,会用到. function onGeneratedRow(columnsResult) { var jsonData = {}; colum ...

  9. 抓取js动态生成的数据分析案例

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

随机推荐

  1. 函数式编程之柯里化（curry）

    函数式编程curry的概念: 只传递给函数一部分参数来调用函数,然后返回一个函数去处理剩下的参数. var add = function(x) { return function(y) { retur ...

  2. Android中Retrifit使用总结

    Android中网络请求框架Retrofit的使用注意事项 1.Retrofit是基于OkHttp网络请求框架的二次封装而已,懂Okhttp的小伙伴,那么Retrofit也就基本都会. 2.Retro ...

  3. ContactsUtil 工具类 - 转载

    import java.util.HashMap; import java.util.Map; //http://www.open-open.com/code/view/1432300986802 / ...

  4. java中的反射简单实例

    package club.reflection.entity.User; /** * 实体类 * */ public class User { public String name; private ...

  5. Problem of saving images in WPF (RenderTargetBitmap)zz

      To save a visual to an image file need to use RenderTargetBitmap, detail is reference to Save and ...

  6. 全本软件白名单 Quanben Software Whitelist

    Windows应用软件 Windows Applications (TBU) 全本推荐微软Windows 10操作系统 Quanben recommends Microsoft Windows 10 ...

  7. Shader实例:溶解效果(Dissolve)

    效果: 图左:一道金光闪过,瞬间灰飞烟灭 图右:燃烧效果,先过渡到黄色,然后渐渐过渡到黑色,最后消失殆尽. 这是游戏中常见的效果,各位可以想想自己玩过的游戏. 手头正在玩的,梦三国手游,死亡的时候就是 ...

  8. HDU 2509 Nim博弈变形

    1.HDU 2509  2.题意:n堆苹果,两个人轮流,每次从一堆中取连续的多个,至少取一个,最后取光者败. 3.总结:Nim博弈的变形,还是不知道怎么分析,,,,看了大牛的博客. 传送门 首先给出结 ...

  9. 移动web前端下拉刷新效果

    直接复制粘贴 放在页面中即可 <script> window.onload = function(){ window.addEventListener('touchstart', touc ...

  10. IPv6进阶

    IPV6报文部分字段介绍 1.没有校验和字段:优点:当TTL减少时,不需要重新处理,相对于IPV4能减少处理的时间:缺点:必须在上层包含校验和2.下一个报文:可指向扩展报文:(大部分节点不处理和查看大 ...