JS：谷歌瀏覽器版本，數(shù)組，生成位置和顏色隨機色塊界面，創(chuàng)建對象，面向?qū)ο?，增刪
每次刷新網(wǎng)頁都在灰色正方形中生成位置和顏色隨機的小正方形色塊界面：（含擴展題1.1等）
創(chuàng)建一個人類對象，包含人物編號，名稱，年齡，性別屬性，包含一個吃飯的功能,將該對象打印到主界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var person={
'bianhao':007,
'name':'詩書畫唱',
'age':20,
'sex':'男',
'chifan' :function(){
alert(this .name+"正在吃飯");}
};
for(var i in person){
document .write(person[i]+" ");}
document .write("<hr>");
document . write(person. bianhao+" "+person. name + " "+person. age+" "+person. sex) ;
person. chifan();
</script>
</head>
<body>
</body>
</html>
2.創(chuàng)建一個人類的對象數(shù)組，用來保存3名人員信息，遍歷人員信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var persons=[
{'bianhao':007,'name':'詩書畫唱1','age':20},
{'bianhao':666,'name':'詩書畫唱2','age':21},
{'bianhao':233,'name':'詩書畫唱3','age':22},
];
for(var i of persons){
for(var j in i){
document . write(i[j]+" ");}
document . write("<br>");}
</script>
</head>
<body>
</body>
</html>
3.創(chuàng)建商品的構(gòu)造方法，實例化3件商品放入到對象數(shù)組中，計算商品的總價格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var shangPin = function(bianhao, name, price, num) {
this.bianhao = bianhao;
this.name = name;
this.price = price;
this.num = num;
}
var shangPinShuZu = [
new shangPin(1,'蘋果', 2, 5),
new shangPin(2,'香蕉', 5, 2),
new shangPin(3, 'CD', 10, 1)
];
alert("計算總價格為："+jiSuanZongJiaGe(shangPinShuZu));
function jiSuanZongJiaGe(shangPinShuZu) {
var zongJiaGe = 0;?
//這里總價格默認等 于0
//這里遍歷一次是一件商品
for(var i of shangPinShuZu) {
// 每個商品花的錢:所購商品價格*所購商品購買數(shù)量
var meiGeShangPinJiaGe = (i.price * i.num);
zongJiaGe += meiGeShangPinJiaGe;
}
return zongJiaGe;
}
</script>
</head>
<body>
</body>
</html>
擴展題：
創(chuàng)建一個人類對象，包含人物編號，名稱，年齡，性別屬性，包含一個吃飯的功能,將該對象打印到按F12后的控制臺界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//第一種創(chuàng)建對象方法：直接創(chuàng)建
var duiXiang1={'bianhao':1,'name':'詩書畫唱' , 'age':19,'sex':'男'};
//第二種創(chuàng)建對象方法：使用new創(chuàng)建
var duiXiang2=new Object();
duiXiang2. bianhao=2;
duiXiang2. name='詩書畫唱SSHC';
duiXiang2. age=19;
duiXiang2. sex='男';
duiXiang2. gongneng=function(){
alert(this . name+"的功能是吃飯");
document.write(this . name+"的功能是吃飯");}
console. log(duiXiang1) ;console. log(duiXiang2);
window.onload=function() {
// document.write(duiXiang2.toString());
duiXiang2.gongneng();}
//創(chuàng)建對象的作用就是以后前后臺進行交互，傳遞頁面中的內(nèi)容，會更方便
</script>
</head>
<body>
</body>
</html>
1.1增加或刪除對象的屬性和內(nèi)容的方法
1.2JS遍歷數(shù)組
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
// 創(chuàng)建一個人類的對象數(shù)組，用來保存3名人員信息，遍歷人員信息
var duiXiang1={'bianhao':1,'name':'詩書畫唱1' , 'age':19,'sex':'男'};
var duiXiang2={'bianhao':1,'name':'詩書畫唱2' , 'age':19,'sex':'男'};
var duiXiang3={'bianhao':1,'name':'詩書畫唱3' , 'age':19,'sex':'男'};
for(var i in duiXiang1){
//i:下標內(nèi)容的鍵(如bianhao)? duiXiang1[i]:要遍歷的內(nèi)容，值（如1）
//alert(i);
document.write(duiXiang1[i]+" ");
}
document.write("<br>");
for(var i in duiXiang2){
//i:下標內(nèi)容的鍵(如bianhao)? ?duiXiang2[i]:要遍歷的內(nèi)容，值（如1）
//alert(i);
document.write(duiXiang2[i]+" ");
} document.write("<br>");
for(var i in duiXiang3){
//i:下標內(nèi)容的鍵(如bianhao)? ?duiXiang3[i]:要遍歷的內(nèi)容，值（如1）
//alert(i);
document.write(duiXiang3[i]+" ");
}
</script>
</head>
<body>
</body>
</html>
