jquery考试成绩统计系统

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>试卷生成器</title>
<style type="text/css">
body {
    font-size: 28px;
    background: #cad6ed;
    font-family: "楷体";
}

#container {
    margin: 0px auto;
}

#box {
    overflow: hidden;
}

#box label {
    margin-top: 5px;
    background: #5dfec7;
    width: 80px;
    display: inline-block;
    text-align: right;
    margin-left: 50px;
}
</style>
<script type="text/javascript">
    window.onload = function() {

        var est = document.getElementById("establish");
        var txtRow = document.getElementById("txtRow");
        var txtColumn = document.getElementById("txtColumn");
        var mybody = document.getElementById('mybody');

        est.onclick = function() {
            var boxs = document.getElementById('box');
            boxs.innerHTML = "";
            var row = txtRow.value;
            var col = txtColumn.value;
            if (col > 4) {
                mybody.style.width = (col - 4) * 350
                        + document.body.scrollWidth;
            }
            initOptions(row, col);
        }
    }

    function initOptions(row, column) {

        var box = document.getElementById('box');
        //题目编号，从0开始
        var count = 0;
        //
        for (var i = 1; i <= row; i++) { //默认i的值为15
            count++;
            var mydiv = document.createElement("div");
            box.appendChild(mydiv);
            mydiv.style.overflow = "auto";
            for (var j = 1; j <= column; j++) {
                //创建一个label
                var label = document.createElement('label');
                //设置编号
                if (j == 1) {
                    label.innerHTML = count + "题";
                } else {
                    //多列的情况下创建题目编号的方式
                    label.innerHTML = (count + row * (j - 1)) + "题";
                }
                var littlediv = document.createElement("div");
                littlediv.style.float = "left";

                mydiv.appendChild(littlediv);
                littlediv.appendChild(label);
                //创建四个选项
                var checkbox1 = document.createElement("input");
                checkbox1.setAttribute("type", "checkbox");
                var cbtxt = document.createTextNode("A");
                littlediv.appendChild(checkbox1);
                littlediv.appendChild(cbtxt);

                //第二个checkbox
                var checkbox2 = document.createElement("input");
                checkbox2.setAttribute("type", "checkbox");
                var cbtxt2 = document.createTextNode("B");
                littlediv.appendChild(checkbox2);
                littlediv.appendChild(cbtxt2);
                //第三个checkbox
                var checkbox3 = document.createElement("input");
                checkbox3.setAttribute("type", "checkbox");
                var cbtxt3 = document.createTextNode("C");
                littlediv.appendChild(checkbox3);
                littlediv.appendChild(cbtxt3);

                //第四个checkbox
                var checkbox4 = document.createElement("input");
                checkbox4.setAttribute("type", "checkbox");
                var cbtxt4 = document.createTextNode("D");
                littlediv.appendChild(checkbox4);
                littlediv.appendChild(cbtxt4);

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

                if (j == column) {
                    mydiv.appendChild(myline);
                }
            }
        }
    }
</script>
<body id="mybody">
    <div id="container">
        <div id="box"></div>

        <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
                id="establish" type="button" value="生成" /> <label for="txtName">姓名:</label>
            <input id="txtName" name="txtName" type="text" /> <input
                type="submit" value="提交" />
        </div>
        <input type="hidden" id="selectData" name="selectData" value="" />

    </div>
</body>
</head>
</html>
jquery考试成绩统计系统

猜你喜欢
