<!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; 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=" 50px;" /> <label for="txtColumn">列:</label> <input id="txtColumn" type="text" style=" 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>