JS（含个人解析）div或表格内容等居中,点击按钮后统计男或女人数，类推法【诗书画唱】
这个可类推，类推也是我常用的方法，比如可仿造sex部分代码推出age部分代码，让这两部份的效果相同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#all{
width: 300px;
height: 200px;
border:1px solid black;
background-color: blue;
position: relative;
//让div等居中：
margin: 0px auto;
}
//表格内容居中：
td{text-align: center;vertical-align: middle;}
</style>
<script>
//getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
//语法：
//document.getElementById(id)
//需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
//
//在操作文档的一个特定的元素时，最好给该元素一个id 属性，
// 为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。
function ageFunction() {
// document 文件
//element元素
// var sex = document.getElementById("selectSex");
// getElementById:得到来自（by)此ID的相关元素内容（个人理解翻译)
// 代码等最好查出每个不懂单词的意思，多写个人理解翻译和个人总结语法等很有各个方面的好处
var age = document.getElementById("selectAge");
for(var i = 18; i <= 60; i++) {
// option 选择
//createElement() 方法通过指定名称创建一个元素（Element），比如下拉框的option内容
// optionVar:下拉框选择变量
var optionVar = document.createElement("option");
// value： 值
optionVar.value = i;
optionVar.text = i;
// appendChild：在列表中添加项目：
//
//document.getElementById("myList").appendChild(newListItem);
//添加之前：
//
//Coffee
//Tea
//添加之后：
//
//Coffee
//Tea
//Water
//append
//
//附加
//age.appendChild(optionVar)用来增加年龄下来框的内容
age.appendChild(optionVar);
}
}
// function:函数
var ren = function(bianhao, name, sex, age) {
this.bianhao = bianhao;
this.name = name;
this.sex = sex;
this.age = age;
}
// array： 数组
//personArray:人的数组
var personArray = new Array();
function createduixiang() {
var bianhao = document.getElementById("bianhao").value;
var name = document.getElementById("uname").value;
//selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。
//
//注释：若允许多重选择，则仅会返回第一个被选选项的索引号。
//
//语法：
//selectObject（被选的对象，可变，自己设置）.selectedIndex=number（数字，可变，自己设置）
var sex = document.getElementById("selectSex").selectedIndex;
// 自己总结的语法和理解性翻译:options[sex].value(选择var sex中换取内容的具体value值)
var sexValue = document.getElementById("selectSex").options[sex].value;
var age = document.getElementById("selectAge").selectedIndex;
var ageValue = document.getElementById("selectAge").options[age].value;
// chuanZhi:传值
var chuanZhi = new ren(bianhao,name,sexValue,ageValue);
personArray[personArray.length] = chuanZhi;
//console： 控制台
//log： 观察记录
//console. log(XXX):按F12后会显示关于对象XXX的相关信息,
//在谷歌浏览器显示相关信息,比如报错等的信息等
//console.log(rens);
}
//下面是定义一个可以统计母个性别的人数的函数
function tongJiFunction() {
createduixiang();
var manNumber = 0;
var womanNumber = 0;
for(var ren of personArray) {
if(ren.sex=='男') {
// 男人数字:manNumber
manNumber++;
} else if(ren.sex=='女') {
// 女人数字:womanNumber
womanNumber++;
}
}
alert("男" + manNumber + "人，女" + womanNumber + "人");
}
window.onload = function() {
// ageFunction:年龄函数，用来增加年龄下来框的内容
ageFunction();
}
</script>
</head>
<body>
<div id="all">
<form>
<table align="center" >
<!--border="1px" cellspacing="0px" cellpadding="0px"-->
<tr><td colspan="2"><b>点击“确认”按钮后统计增加男或女人数</b></td></tr>
<tr>
<td >编号</td>
<td >
<input type="text" id="bianhao" placeholder="请输入用户编号" />
</td>
</tr>
<tr>
<td>姓名</td>
<td align="center">
<input type="text" id="uname" placeholder="请输入用户姓名" />
</td>
</tr>
<tr>
<td>性别</td>
<td align="center">
<select id="selectSex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td >年龄</td>
<!--不要拼写错了，比如ec写反成ce-->
<td align="center">
<select id="selectAge">
<!--这里不可再写<option id="option"></option>-->
</select>
</td>
</tr>
<tr>
<td></td>
<td align="center" colspan="2">
<!-- onclick（点击） 事件会在对象被点击时发生。
click：点击
onclick：在上面点击（个人理解翻译）
-->
<input type="button" value="确认" onclick="tongJiFunction()" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
