JS（含個(gè)人解析）div或表格內(nèi)容等居中,點(diǎn)擊按鈕后統(tǒng)計(jì)男或女人數(shù)，類推法【詩書畫唱】
這個(gè)可類推，類推也是我常用的方法，比如可仿造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;
}
//表格內(nèi)容居中：
td{text-align: center;vertical-align: middle;}
</style>
<script>
//getElementById() 方法可返回對(duì)擁有指定 ID 的第一個(gè)對(duì)象的引用。
//語法：
//document.getElementById(id)
//需要查找文檔中的一個(gè)特定的元素，最有效的方法是 getElementById()。
//
//在操作文檔的一個(gè)特定的元素時(shí)，最好給該元素一個(gè)id 屬性，
// 為它指定一個(gè)（在文檔中）唯一的名稱，然后就可以用該 ID 查找想要的元素。
function ageFunction() {
// document 文件
//element元素
// var sex = document.getElementById("selectSex");
// getElementById:得到來自（by)此ID的相關(guān)元素內(nèi)容（個(gè)人理解翻譯)
// 代碼等最好查出每個(gè)不懂單詞的意思，多寫個(gè)人理解翻譯和個(gè)人總結(jié)語法等很有各個(gè)方面的好處
var age = document.getElementById("selectAge");
for(var i = 18; i <= 60; i++) {
// option 選擇
//createElement() 方法通過指定名稱創(chuàng)建一個(gè)元素（Element），比如下拉框的option內(nèi)容
// optionVar:下拉框選擇變量
var optionVar = document.createElement("option");
// value： 值
optionVar.value = i;
optionVar.text = i;
// appendChild：在列表中添加項(xiàng)目：
//
//document.getElementById("myList").appendChild(newListItem);
//添加之前：
//
//Coffee
//Tea
//添加之后：
//
//Coffee
//Tea
//Water
//append
//
//附加
//age.appendChild(optionVar)用來增加年齡下來框的內(nèi)容
age.appendChild(optionVar);
}
}
// function:函數(shù)
var ren = function(bianhao, name, sex, age) {
this.bianhao = bianhao;
this.name = name;
this.sex = sex;
this.age = age;
}
// array： 數(shù)組
//personArray:人的數(shù)組
var personArray = new Array();
function createduixiang() {
var bianhao = document.getElementById("bianhao").value;
var name = document.getElementById("uname").value;
//selectedIndex 屬性可設(shè)置或返回下拉列表中被選選項(xiàng)的索引號(hào)。
//
//注釋：若允許多重選擇，則僅會(huì)返回第一個(gè)被選選項(xiàng)的索引號(hào)。
//
//語法：
//selectObject（被選的對(duì)象，可變，自己設(shè)置）.selectedIndex=number（數(shù)字，可變，自己設(shè)置）
var sex = document.getElementById("selectSex").selectedIndex;
// 自己總結(jié)的語法和理解性翻譯:options[sex].value(選擇var sex中換取內(nèi)容的具體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： 控制臺(tái)
//log： 觀察記錄
//console. log(XXX):按F12后會(huì)顯示關(guān)于對(duì)象XXX的相關(guān)信息,
//在谷歌瀏覽器顯示相關(guān)信息,比如報(bào)錯(cuò)等的信息等
//console.log(rens);
}
//下面是定義一個(gè)可以統(tǒng)計(jì)母個(gè)性別的人數(shù)的函數(shù)
function tongJiFunction() {
createduixiang();
var manNumber = 0;
var womanNumber = 0;
for(var ren of personArray) {
if(ren.sex=='男') {
// 男人數(shù)字:manNumber
manNumber++;
} else if(ren.sex=='女') {
// 女人數(shù)字:womanNumber
womanNumber++;
}
}
alert("男" + manNumber + "人，女" + womanNumber + "人");
}
window.onload = function() {
// ageFunction:年齡函數(shù)，用來增加年齡下來框的內(nèi)容
ageFunction();
}
</script>
</head>
<body>
<div id="all">
<form>
<table align="center" >
<!--border="1px" cellspacing="0px" cellpadding="0px"-->
<tr><td colspan="2"><b>點(diǎn)擊“確認(rèn)”按鈕后統(tǒng)計(jì)增加男或女人數(shù)</b></td></tr>
<tr>
<td >編號(hào)</td>
<td >
<input type="text" id="bianhao" placeholder="請(qǐng)輸入用戶編號(hào)" />
</td>
</tr>
<tr>
<td>姓名</td>
<td align="center">
<input type="text" id="uname" placeholder="請(qǐng)輸入用戶姓名" />
</td>
</tr>
<tr>
<td>性別</td>
<td align="center">
<select id="selectSex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td >年齡</td>
<!--不要拼寫錯(cuò)了，比如ec寫反成ce-->
<td align="center">
<select id="selectAge">
<!--這里不可再寫<option id="option"></option>-->
</select>
</td>
</tr>
<tr>
<td></td>
<td align="center" colspan="2">
<!-- onclick（點(diǎn)擊） 事件會(huì)在對(duì)象被點(diǎn)擊時(shí)發(fā)生。
click：點(diǎn)擊
onclick：在上面點(diǎn)擊（個(gè)人理解翻譯）
-->
<input type="button" value="確認(rèn)" onclick="tongJiFunction()" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
