JS制作简易的考试答题管理系统

答题卡系统： 网站运行效果

代码区域：

HTML 代码：

<style type="text/css">

body {

    font-size: 30px;

    background: beige;

    font-family: "宋体";

}

#container {

    margin: 1px auto; /*调整边缘*/

}

#box {

    overflow: hidden; /*隐藏溢出;*/

}

#box label {

    margin-top: 5px; /*上边距*/

    background: #cde6c7;

    width: 80px;

    display: inline-block; /*显示内连*/

    text-align: right; /*排列文本*/

    margin-left: 50px;

}

</style>

js 代码：

<script type="text/javascript">

    window.onload = function() {

        var row = ;//行

        var col = ;//列

        var mybody = document.getElementById('mybody');

        if (col > ) {

            //设置样式 宽度

            mybody.style.width = document.body.scrollWidth + (col - ) * ;

        }

        initOptions(row, col);

        var btn = document.getElementById("F");

        var btn2 = document.getElementById('d');

        btn2.onclick = names;

        btn.onclick = btnClick;

        //创建一个rchoice

        var cbxs = document.getElementsByName("rchoice");

        for (var i = ; i < cbxs.length; i++) {

            cbxs[i].style.cssText = "margin-left:20px;";

        }

    };

    //调度方法 打印行和列

    function btnClick() {

        var a = document.getElementById("a");

        var b = document.getElementById("b");

        var hang = a.value;

        var lie = b.value;

        initOptions(hang, lie);

    };

    //判断用户名是否存在

    function names() {

        var text = document.getElementById('c');

        var name = text.value;

        if (name != "") {

            alert("OK");

        } else {

            alert('请填写用户名');

        }

    }

    //动态加载答题区控件！

    function initOptions(row, column) {

        //创建一个box

        var box = document.getElementById('box');

        box.innerHTML = "";

        //题目编号，从0开始

        var count = ;//计算题目编号

        var mytag; //CheckBox的Tag属性值

        for (var i = ; i <= row; i++) {

            count++;

            var mydiv = document.createElement("div");

            box.appendChild(mydiv);//获取子节点

            mydiv.style.overflow = "auto";

            for (var j = ; j <= column; j++) { //默认j的值为2

                //创建一个label

                var label = document.createElement('label');

                //设置座位号

                if (j == ) {

                    label.innerHTML = count + "题";

                    mytag = count;

                } else {

                    //多列的情况下创建题目编号的方式

                    label.innerHTML = (count + row * (j - )) + "题";

                    mytag = count + row * (j - );

                }

                var littlediv = document.createElement("div");

                littlediv.style.float = "left";

                mydiv.appendChild(littlediv);

                littlediv.appendChild(label);

                //创建四个选项

                //第一个checkbox DOM Checkbox 对象

                var cb1 = document.createElement("input");

                cb1.setAttribute("type", "checkbox");

                cb1.setAttribute("value", "A:" + mytag);

                cb1.setAttribute("name", "rchoice");

                var cbtxt = document.createTextNode("A");

                littlediv.appendChild(cb1);

                littlediv.appendChild(cbtxt);

                //第二个checkbox DOM Checkbox 对象

                var cb2 = document.createElement("input");

                cb2.setAttribute("type", "checkbox");

                cb2.setAttribute("value", "B:" + mytag);

                cb2.setAttribute("name", "rchoice");

                var cbtxt2 = document.createTextNode("B");

                littlediv.appendChild(cb2);

                littlediv.appendChild(cbtxt2);

                //第三个checkbox DOM Checkbox 对象

                var cb3 = document.createElement("input");

                cb3.setAttribute("type", "checkbox");

                cb3.setAttribute("value", "C:" + mytag);

                cb3.setAttribute("name", "rchoice");

                var cbtxt3 = document.createTextNode("C");

                littlediv.appendChild(cb3);

                littlediv.appendChild(cbtxt3);

                //第四个checkbox DOM Checkbox 对象

                var cb4 = document.createElement("input");

                cb4.setAttribute("type", "checkbox");

                cb4.setAttribute("value", "D:" + mytag);

                cb4.setAttribute("name", "rchoice");

                var cbtxt4 = document.createTextNode("D");

                littlediv.appendChild(cb4);

                littlediv.appendChild(cbtxt4);

                var myline = document.createElement("br");

                if (j == column) {

                    mydiv.appendChild(myline);

                }

            }

        }

    }

</script>

Body 里：

<body id="mybody">

    <div class="mybody"></div>

    <span class="o"> 行: <input id="a">列: <input id="b">

        <button id="F">生成</button> 姓名: <input type="text" id="c">

        <button id="d">提交</button> <br> <br>

        <div id="container">

            <div id="box"></div>

        </div>

    </span>

</body>