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

 网页效果：

 

代码部分:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src='js/jQuery1.11.1.js'></script>
<script type="text/javascript">
    //生成方法
    function doclick(hang, lie) {
        $("#body").empty();
        //var hang = $('#hang').val();
        //var lie = $('#lie').val();
        var testNum = 1;
        var br = $('br');
        for (var i = 0; i < lie; i++) {
            var div = buildHTML("div", {
                id : "div" + i,
                style : "margin:0 auto;width:260px;display:inline-block"
            });
            $("#body").css("width", 260 * lie + "px").append(div);
            for (var j = 0; j < hang; j++) {
                var span = buildHTML("span", testNum + "题", {
                    style : 'background : RGB(176,224,230)',
                    id : "span" + j
                });
                var A = buildHTML("input", 'A', {
                    type : "checkbox"
                });
                var B = buildHTML("input", 'B', {
                    type : "checkbox"
                });
                var C = buildHTML("input", 'C', {
                    type : "checkbox"
                });
                var D = buildHTML("input", 'D', {
                    type : "checkbox"
                });

                testNum++;
                $('#div' + i).append(span).append(A).append(B).append(C)
                        .append(D).append("<br/>");
            }
        }
    };
    var BTNclick = function() {
        var hang = $('#hang').val();
        var lie = $('#lie').val();
        doclick(hang, lie);
    }
    window.onload = function() {
        doclick(15, 2);
        $('#btnSC').click(BTNclick);
    };

    buildHTML = function(tag, html, attrs) {
        if (typeof (html) != 'string') {
            attrs = html;
            html = null;
        }
        var h = '<' + tag;
        for (attr in attrs) {
            if (attrs[attr] === false)
                continue;
            h += ' ' + attr + '="' + attrs[attr] + '"';
        }
        return h += html ? ">" + html + "</"+ tag + ">" : "/>";
    };
</script>
<style type="text/css">
span {
    font-family: '楷体';
    font-size: 26px;
}

#botom {
    margin: 0 auto;
    width: 790px;
    clear: both;
}

#body {
    margin: 0 auto;
}

body {
    margin: 0 auto;
    background: RGB(217, 228, 246);
}
</style>
</head>
<body>
    <h2
        style="font-family: '楷体'; color: blue; width: 242px; margin: 0 auto">考试成绩统计系统</h2>
    <div id='body'></div>
    <div id="botom">
        <span>行：</span> <input type='text' id='hang'> <span>列：</span>
        <input type='text' id='lie'> <input type="button" value='生成'
            id='btnSC'> <span>姓名：</span> <input type="text" id='name'>
        <input type="button" value="提交" id='btnTJ'>
    </div>
</body>
</html>

 

posted @ 2018-07-06 15:48  H丶  阅读(674)  评论(0)  编辑  收藏  举报