<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="js/new_file.js" ></script>
<link rel="stylesheet" href="css/new_file.css" />
<style type="text/css">
.buttonType{
background-color: gray;
border: 1px solid gainsboro;
padding: 0.6em;
border-radius: 1em;
color: white;
outline: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".buttonType").mousedown(function(){
$(this).css("color","black");
}).mouseup(function(){
$(this).css("color","white");
});
});
</script>
</head>
<body>
<div class="topDisplay">
<b>
<pre>Please Input The Information</pre>
</b>
</div>
<div class="mainDisplay">
<ul class="mainUl"></ul>
</div>
<div class="bottomDisplay">
<input type="submit" class="buttonType" value="Submit"/>
</div>
</body>
</html>
/*通用样式设置*/
ul{
list-style: none;
}
/*设置topDisplay样式*/
.topDisplay{
background-color: gainsboro;
border-radius: 0.5em;
padding: 2px;
color: darkslategray;
}
.topDisplay pre{
text-align: center;
font-size: 18px;
}
/*设置mainDisplay及其子元素的样式*/
.mainUl li{
width: 50%;
float: left;
margin: 0.5em 0;
}
.mainUl li span{
margin: 0 0.5em;
}
.mainUl li div{
display: inline-block;
color: gray;
}
/*设置bottomDisplay展示样式*/
.bottomDisplay{
background-color: gainsboro;
border-radius: 1em;
}
.bottomDisplay .buttonType{
margin-top: 2em;
margin-bottom: 2em;
margin-left: 90%;
}
$(document).ready(function() {
//对象定义
function ElementObject() {
this.Name = "name";
this.Telphone = "13012345678";
this.Sex = "male";
this.Gender = "Mr.";
this.Birthday = new Date();
this.Age = 0;
this.Email = "xx@163.com";
this.HomeNumber = "8601234";
this.Town = "town";
}
//显示元素创建
ElementObject.prototype.ElementsDisplay = function() {
//遍历对象属性
for(name in this) {
//判断是属性还是方法
if(this[name] instanceof Function) {
continue;
} else {//是属性即显示
//创建显示节点
var $newLi = $("<li></li>");
var $newDiv = $("<div></div>");
var $separationSpan = $("<span>:</span>");
var $newInput = $("<input />");
//显示节点设置
$($newLi).attr("name", String(name));
$($newDiv).text(name);
//显示节点加入父元素
$($newLi).append($newDiv, $separationSpan, $newInput);
$(".mainUl").append($newLi);
}
}
}
//设置div格式,根据所有div长度,找到最长的,并设置为所有的div长度
ElementObject.prototype.ElementsDisplayDiv = function(findEleCls,eleTag){
//遍历查询出div的最大长度
var elementWidth = 0;
var eleArr = $(String(findEleCls)).find(String(eleTag)).get();
for(ele in eleArr) {
var eleWidth = $(eleArr[ele]).width();
if(eleWidth > elementWidth) {
elementWidth = eleWidth;
}
}
//设置所有的div长度为最大值
$(String(findEleCls)).find(String(eleTag)).width(elementWidth);
}
//设置不同的输入类型
ElementObject.prototype.ElementDisplayInput = function(findEleCls,eleTag){
var eleArr = $(String(findEleCls)).find(String(eleTag)).get();
for(ele in eleArr) {
switch ($(eleArr[ele]).parent().attr("name")){
case "Telphone":
case "HomeNumver":
$(eleArr[ele]).attr("type","number");
break;
case "Sex":
var SexList = {
"男":"Male",
"女":"Female"
}
$(eleArr[ele]).replaceWith(setOption(SexList));
break;
case "Gender":
var GenderList = {
"先生":"Mr.",
"女士":"Mrs.",
"小姐":"Miss"
}
$(eleArr[ele]).replaceWith(setOption(GenderList));
break;
case "Birthday":
$(eleArr[ele]).attr("type","date").val("2000-01-01");
break;
case "Age":
$(eleArr[ele]).attr({
"type":"number",
"min":"0",
"disabled":"disabled"
}).val(18);
break;
default:
$(eleArr[ele]).attr("type","text");
break;
}
}
}
//设置下拉框的方法
function setOption(dict){
var ele = $("<select></select>");
for(name in dict){
$option = $("<option></option>").attr("value",String(dict[name])).html(String(dict[name]));
$(ele).append($option);
}
return ele;
}
//对象定义
var newObj = new ElementObject();
newObj.ElementsDisplay();
newObj.ElementsDisplayDiv(".mainUl","div");
newObj.ElementDisplayInput(".mainUl","input");
//年龄跟随生日变化
$("[name='Birthday'] > input").change(function(){
var birth = new Date($(this).val()).getFullYear();
var now = new Date().getFullYear();
$("[name='Age'] > input").val(now-birth);
});
//校验Email
$("[name='Email'] > input").blur(function(){
var reg = /\w+[@]{1}\w+[.]\w+/;
if(!reg.test($(this).val())){
alert("Please input the correct email format !");
}
});
});
