目标：
写一个可以录入创建信息表的网页（信息表的数量自己定义）内容：
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：
最终
扫一扫
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
