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+"%";
}