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 = 15;//行
        var col = 2;//列
        var mybody = document.getElementById('mybody');
        if (col > 4) {
            //設置樣式 寬度 
            mybody.style.width = document.body.scrollWidth + (col - 4) * 350;
        }

        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 = 0; 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 = 0;//計算題目編號
        var mytag; //CheckBox的Tag屬性值
        for (var i = 1; i <= row; i++) {
            count++;
            var mydiv = document.createElement("div");
            box.appendChild(mydiv);//獲取子節點
            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";
                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>