1.直接創建對象，並逐一賦值
直接創建對象以及對象的屬性，並直接賦值
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript</title>
</head>
<body>
<script>
var person=
{
name:"jock",
age:"29",
id:1234
};
document.write(person.name+" "+person.id);
</script>
</body>
</html>2.使用對象構造器去創建對象。
這種方法有點類似於Java中的構造函數。可以先創建對象的模板，每次創建新的對象時給參數賦值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript</title>
</head>
<body>
<script>
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>
</body>
</html>把對象方法添加到對象構造器中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript</title>
</head>
<body>
<script>
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;//這句話比較特殊，和java的set不同，要額外的將這個屬性添加到對象。
function changeName(name){
this.lastname=name;
}
}
myMother=new person("Sally","Rally",48,"green");
document.write(myMother.lastname+"<br>");
myMother.changeName("Doe");
document.write(myMother.lastname);
</script>
</body>
</html>3.批量處理變量
先看下我在工作中代碼的實例，這個函數的作用是取到每個UEAmount的值，計算好每個佔比值後，加起來算出總值與總的百分佔比，並在panel-title中根據數值結果動態的顯示。使得客戶可以比較直觀的瞭解到當前UE的使用率。
function showall() {
var UV = document.getElementById("UE value").innerText; //UE Value
var UA1 = document.getElementById("UE amount1").value; //UE amount
var UP1 = (UA1 / UV) * 100; //UE percent
if (UA1 == 0) {
UA1 = 0;
UP1 = 0;
}
var UA2 = document.getElementById("UE amount2").value; //UE amount
var UP2 = (UA2 / UV) * 100; //UE percent
if (UA2 == 0) {
UA2 = 0;
UP2 = 0;
}
var UA3 = document.getElementById("UE amount3").value; //UE amount
var UP3 = (UA3 / UV) * 100; //UE percent
if (UA3 == 0) {
UA3 = 0;
UP3 = 0;
}
var UA4 = document.getElementById("UE amount4").value; //UE amount
var UP4 = (UA4 / UV) * 100; //UE percent
if (UA4 == 0) {
UA4 = 0;
UP4 = 0;
}
var UA5 = document.getElementById("UE amount5").value; //UE amount
var UP5 = (UA5 / UV) * 100; //UE percent
if (UA5 == 0) {
UA5 = 0;
UP5 = 0;
}
var UA6 = document.getElementById("UE amount6").value; //UE amount
var UP6 = (UA6 / UV) * 100; //UE percent
if (UA6== 0) {
UA6 = 0;
UP6 = 0;
}
var UA7 = document.getElementById("UE amount7").value; //UE amount
var UP7 = (UA7/ UV) * 100; //UE percent
if (UA7== 0) {
UA7= 0;
UP7 = 0;
}
var UA8= document.getElementById("UE amount8").value; //UE amount
var UP8 = (UA8/ UV) * 100; //UE percent
if (UA8== 0) {
UA8= 0;
UP8 = 0;
}
var UA9= document.getElementById("UE amount9").value; //UE amount
var UP9 = (UA9/ UV) * 100; //UE percent
if (UA9== 0) {
UA9= 0;
UP9 = 0;
}
var UA = parseInt(UA1) + parseInt(UA2) + parseInt(UA3) + parseInt(UA4) + parseInt(UA5)+ parseInt(UA6)+ parseInt(UA7)+ parseInt(UA8)+ parseInt(UA9);
var UP = (UA / UV) * 100;
if (isNaN(UA)) {
return false;
}
else if (parseInt(UA) > UV) {
document.getElementById("head").className = "panel panel-danger";
document.getElementById("task1").className="progress-bar progress-bar-danger";
} else {
document.getElementById("head").className = "panel panel-info";
document.getElementById("task1").className="progress-bar progress-bar-success";
}
document.getElementById("p0").innerHTML = "Percentage:" + UP.toFixed(2) + "%" + " " + "Amount: " + UA;
document.getElementById("task01").innerHTML=UP.toFixed(2)+" %Complete";
document.getElementById("task1").style.width=UP+"%";
}這裏可以看到我的UEGroup達到了9個，所以對應的值與佔比都是9個。未來還可能會更多，顯然這樣的算法複用價值是極低的。我首先想到的是，在定義變量的時候是否可以像之前批量處理傳參爲id的情況那樣處理呢？其實是不行的。所以正確的做法是定義一個對象，再用循環去逐一創建屬性並賦值
function showall() {
var UV = document.getElementById("UE value").innerText; //UE Value
var select=document.getElementById("s1");
var value=select.value;
var ua={};
var up={};
for(var i=1;i<=value;i++){
ua[i]=document.getElementById("UE amount"+i).value;
up[i]=(ua[i]/UV)*100;
if(ua[i]==0){
ua[i]=0;
up[i]=0;
}
}
var UA=0;
for(var i=1;i<=value;i++){
UA=UA+parseInt(ua[i]);
}
var UP = (UA / UV) * 100;
if (isNaN(UA)) {
return false;
}
else if (parseInt(UA) > UV) {
document.getElementById("head").className = "panel panel-danger";
document.getElementById("task1").className="progress-bar progress-bar-danger";
} else {
document.getElementById("head").className = "panel panel-info";
document.getElementById("task1").className="progress-bar progress-bar-success";
}
document.getElementById("p0").innerHTML = "Percentage:" + UP.toFixed(2) + "%" + " " + "Amount: " + UA;
document.getElementById("task01").innerHTML=UP.toFixed(2)+" %Complete";
document.getElementById("task1").style.width=UP+"%";
}