Web_HTML_信息表录入

目标：

写一个可以录入创建信息表的网页（信息表的数量自己定义）

---

内容：

1、 html完成样式开发，css做样式统筹
2、 js做用户输入的安全校验
3、 js动态创建表单，异步安全执行
4、 进度条（未完成），传入后端的准备

---

时间：

1周

---

产出：

css:

.header_subPage_PMdataCheck {
	padding: 80px;
	/* some padding */
	text-align: center;
	/* center the text */
	background: #1abc9c;
	/* green background */
	color: white;
	/* white text color */
}
.header_subPage_PMdataCheck h1 {
	font-size: 30px;
}
/* Style the top navigation bar */
.navbar {
	overflow: hidden;
	/* Hide overflow */
	background-color: #333;
	/* Dark background color */
}
/* Style the navigation bar links */
.navbar a {
	float: left;
	/* Make sure that the links stay side-by-side */
	display: block;
	/* Change the display to block, for responsive reasons (see below) */
	color: white;
	/* White text color */
	text-align: center;
	/* Center the text */
	padding: 14px 14px;
	/* Add some padding */
	text-decoration: none;
	/* Remove underline */
}
/* Right-aligned link */
.navbar a.right {
	float: right;
	/* Float a link to the right */
}
/* Change color on hover/mouse-over */
.navbar a:hover {
	background-color: #ddd;
	/* Grey background color */
	color: black;
	/* Black text color */
}
/* Ensure proper sizing */
* {
	box-sizing: border-box;
}
input, textarea {
display: block;
justify-content: center;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
}
/* 适配 */
	@media screen and (max-width: 700px) {
		.row {
			flex-direction: column;
		}
	}
	/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
	@media screen and (max-width: 400px) {
		.navbar a {
			float: none;
			width: 100%;
		}
	}
	/* ----------------------------------------- */
	/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
		.column,
		input[type=submit] {
			width: 100%;
			margin-top: 0;
		}
	}
/* 样式 */
/* Column container */
.row {
	display: flex;
	/* flex-wrap: wrap; */
	justify-content: center;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
	flex: 30%;
	/* Set the width of the sidebar */
	background-color: #f1f1f1;
	/* Grey background color */
	padding: 30px;
	/* Some padding */
}
/* Main column */
.main {
	flex: 70%;
	/* Set the width of the main content */
	background-color: white;
	/* White background color */
	padding: 20px;
	/* Some padding */
}
.footer {
	padding: 20px;
	/* Some padding */
	text-align: center;
	/* Center text*/
	background: #ddd;
	/* Grey background */
}
/* ----------------------------------------- */
/* Style inputs */
input[type=text],
select,
textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	margin-top: 6px;
	margin-bottom: 16px;
	resize: vertical;
}
input[type=submit] {
	background-color: #4CAF50;
	color: white;
	padding: 12px 20px;
	border: none;
	cursor: pointer;
}
input[type=submit]:hover {
	background-color: #45a049;
}
/* Style the container/contact section */
.container {
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 10px;
}
/* Create two columns that float next to eachother */
.column {
	float: left;
	width: 50%;
	margin-top: 6px;
	padding: 20px;
}
/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
	padding: 0px;
}
.div{
	    width:20%;
	    height:45px;
	    line-height:36px;/**设置行高和控件高一样，这是内部文字才能垂直居中*/
	    overflow:hidden;/**为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了*/
	    margin: 15 auto;/**让div在页面中居中显示*/
	    background-color:#ffffff;/**背景颜色*/
	    border:solid 15px #ffffff;
	    border-width:1px 1px 0px 1px;
		text-align: center;
}
#wrapper {
    width: 550px;
    height: 100px;
    border: 1px solid #000000;
    margin: 0 auto;
}
#progressbar {
    width: 180px;
    height: 20px;
    margin: 0 auto;
    margin-top: 40px;
    border: 1px solid #000000;
}
/* 设置进度条动画 （功能未实现）*/
#fill {
    animation: move 2s;
    text-align: center;
    background-color: #6caf00;
    color: #ffffff;
}
/* 实现元素宽度过度的动画效果（功能未实现） */
@keyframes move {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

html:

<head>
  <title>PM产品信息录入</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style type="text/css">
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="css/subPage_PMdataCheckIn.css" />
</head>
<body>
  <div class="header_subPage_PMdataCheck">
    <h1>PM产品信息录入</h1>
  </div>
  <div class="navbar">
    <a href="#">Back</a>
    <a href="#">Asset</a>
    <a href="#">Price</a>
    <a href="#" class="right">Home</a>
    <a href="#" class="right">About</a>
  </div>
  <div class="navbar row">
    <div class="row" style="width: 30%; float: left">
      <input
        type="text"
        name="name"
        id="submissions"
        style="
          width: 100%;
          height: 40%;
          margin: 30px;
          margin-top: 35px;
          margin-right: 0;
        "
        placeholder="填入想创建的表单数量"
      />
      <input
        id="creatBaseSubmissions"
        type="submit"
        value="创建表单"
        style="
          width: 100%;
          height: 40%;
          margin: 30px;
          margin-top: 35px;
          margin-left: 0;
        "
      />
    </div>
  </div>
  <div class="row">
    <div class="main" id="root">
      <div>暂无可提交信息</div>
    </div>
  </div>
  <div class="footer">
    <h2>
      <input id="SubmitTable" type="submit" value="提交表单" />
    </h2>
  </div>
  <p id="demo">1</p>
</body>

js:

<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.serializejson.js"></script>
<script type="text/javascript">
  /* 参数名称修改 */
  function FromInfor(name, type, remarks) {
    this.name = name;
    this.type = type;
    this.remarks = remarks;
  }
  const fromNaming = new FromInfor(":产品代号", "产品类型", "产品备注");
  var clicked = false;
  var count = 0;
  /* 用户输入安全校验 */
  document.getElementById("creatBaseSubmissions").onclick = function () {
    clicked = true;
    var a = document.getElementById("submissions").value;
    a = parseInt(a);
    if (typeof a == "number") {
      if (isNaN(a) || a == 0 || a > 300) {
        alert("请输入有效数字");
      } else {
        var main = document.getElementById("root");
        while (main.hasChildNodes()) {
          //当elem下还存在子节点时 循环继续
          main.removeChild(main.firstChild);
        }
        count = 0;
        creatDiv(a - 1);
      }
    } else {
      alert("请输入有效数字");
    }
  };
  function creatDiv(a) {
    /* TODO从数据库读取类型 */
    var typesOfOptions =
      "3D建模艺术作品,2D原画艺术作品,Ue4引擎材质,Unity引擎材质,Maya插件脚本,3DMax插件脚本";
    var arrTypesOfOptions = typesOfOptions.split(",");
    /* 安全异步执行 */
    window.setTimeout(function () {
      console.log("步骤1完成");
      /* 创建 */
      for (var i = 0; i <= a; i++) {
        var row = document.createElement("div");
        row.id = "row" + String(i);
        row.className = "row";
        var div = document.createElement("div");
        div.id = "column" + String(i);
        div.className = "row";
        /* document.getElementsByTagName('body')[0].appendChild(div); */
        document.getElementsByClassName("main")[0].appendChild(div);
        var form = document.createElement("form");
        form.id = "form_PMcheckIn" + String(i);
        form.action = "/action_page.php";
        form.className = "row";
        form.style.width = "100%";
        /* document.getElementById('column'+String(i))[0].appendChild(form); */
        div.parentNode.insertBefore(form, div);
        var label = document.createElement("label");
        label.id = "label" + String(i);
        label.textContent = String(i) + fromNaming.name;
        label.className = "div";
        div.parentNode.insertBefore(label, div);
        var input = document.createElement("input");
        input.id = "inputCodename" + String(i);
        input.placeholder = "例如:UBI_ProjectB_Name" + String(i);
        /* input.name = "产品代号" + String(i); */
        input.name = "ProductCode";
        input.itemType = "text";
        input.className = "div";
        input.itemType = "text";
        input.itemValue = "12321312";
        input.checked = true;
        div.parentNode.insertBefore(input, div);
        var labelS = document.createElement("label");
        labelS.id = "labelS" + String(i);
        labelS.textContent = fromNaming.type;
        labelS.className = "div";
        div.parentNode.insertBefore(labelS, div);
        var select = document.createElement("select");
        select.id = "select" + String(i);
        select.className = "div";
        /* select.name = "所属类型"; */
        select.name = "ProductType";
        div.parentNode.insertBefore(select, div);
        for (var ii = 0; ii <= arrTypesOfOptions.length; ii++) {
          var option0 = document.createElement("option");
          option0.id = "option" + String(i) + "_" + arrTypesOfOptions[ii];
          option0.itemValue = arrTypesOfOptions[ii];
          option0.textContent = arrTypesOfOptions[ii];
          select.parentNode.insertBefore(option0, select);
        }
        /* 备注 */
        var labelT = document.createElement("label");
        labelT.id = "labelT" + String(i);
        labelT.textContent = fromNaming.remarks;
        labelT.className = "div";
        div.parentNode.insertBefore(labelT, div);
        var textarea = document.createElement("textarea");
        textarea.id = "textarea" + String(i);
        /* textarea.className = "div"; */
        textarea.placeholder = "关于产品 " + String(i) + " 的备注";
        textarea.style.height = "100%";
        textarea.style.width = "100%";
        textarea.name = "ProductRemarks";
        div.parentNode.insertBefore(textarea, div);
      }
      window.setTimeout(function () {
        console.log("步骤2完成");
        /* 重新设置父子级 */
        for (var i = 0; i <= a; i++) {
          var row = document.getElementById("row" + String(i));
          var form = document.getElementById("form_PMcheckIn" + String(i));
          var div = document.getElementById("column" + String(i));
          div.appendChild(form);
          var label = document.getElementById("label" + String(i));
          form.appendChild(label);
          var input = document.getElementById("inputCodename" + String(i));
          form.appendChild(input);
          var labelS = document.getElementById("labelS" + String(i));
          form.appendChild(labelS);
          var select = document.getElementById("select" + String(i));
          form.appendChild(select);
          for (var ii = 0; ii <= arrTypesOfOptions.length; ii++) {
            var option0 = document.getElementById(
              "option" + String(i) + "_" + arrTypesOfOptions[ii]
            );
            select.appendChild(option0);
          }
          /* 备注 */
          var labelT = document.getElementById("labelT" + String(i));
          form.appendChild(labelT);
          var textarea = document.getElementById("textarea" + String(i));
          form.appendChild(textarea);
        }
        window.setTimeout(function () {
          alert(a + 1 + "张新表单创建成功");
        }, 100);
      }, 100);
    }, 100);
  }
  document.getElementById("SubmitTable").onclick = function () {
    if (clicked == false) {
      alert("请先创建表单");
    } else {
      var a = document.getElementById("submissions").value;
      var lable = document.getElementById("inputCodename0").value;
      lable = "" + lable;
      var outPutToServer = { 产品代号: +lable, 产品全称: +lable };
      var outPutToServerJSON = JSON.stringify(outPutToServer);
      document.getElementById("demo").innerHTML = outPutToServerJSON;
      var obj = $("form_PMcheckIn0").serializeJSON();
      var jsonString = JSON.stringify(obj);
      document.getElementById("demo").innerHTML = jsonString;
      var element = document.getElementById("form_PMcheckIn0");
      if (element == null) {
        alert("没找到表单");
      } else {
        var html = element.outerHTML;
        var data = { html: html };
        var json = JSON.stringify(data);
        document.getElementById("demo").innerHTML = json;
      }
      for (var i = 0; i <= a; i++) {
        var formData = JSON.stringify(
          $("#form_PMcheckIn" + String(i)).serializeArray()
        );
        document.getElementById("demo").innerHTML = formData;
      }
      /* -------将表单数组打散成obj------- */
      $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
          if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
              o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || "");
          } else {
            o[this.name] = this.value || "";
          }
        });
        return o;
      };
      /* ------------------------------------ */
      var objArr = [];
      var formData = {};
      for (var i = 0; i <= a - 1; i++) {
        /* formData = $("#form_PMcheckIn"+String(i)).serializeArray(); */
        formData = $("#form_PMcheckIn" + String(i)).serializeObject();
        objArr.push(formData);
        if (i / a == 1) {
          alert("提交成功");
        }
      }
      objArr = JSON.stringify(objArr);
      document.getElementById("demo").innerHTML = objArr;
      /* window.setTimeout(function() {
				console.log(1)
				window.setTimeout(function() {
					console.log(2)
					window.setTimeout(function() {
						console.log(3)
					}, 50)
				}, 50)
			}, 50) */
    }
  };
</script>

pic：

最终

---