1 遍历数组 Array = [ 33,86,98,33.45 ]
let Array = [33,86,98,33.45]
for(let i = 0; i < Array.length; i++) {
document.write(`${Array[i]}<br />`)
}
// 输出结果是: 33 86 98 33 45
2 遍历数组 studentArray,如果sex为男,输出:××下课去下围棋,sex为女,输出:××下课去逛街,如果like为篮球,输出:该同学的名字为:××
let studentArray = [{
"name": '张三',
"sex": '男',
"height": 175,
"width": 145,
"like": ["排球", "美术", "象棋"]
},
{
"name": '李四',
"sex": '男',
"height": 180,
"width": 170,
"like": ["篮球", "rap", "跳棋"]
},
{
"name": '王五',
"sex": '女',
"height": 170,
"width": 180,
"like": ["围棋", "游泳", "足球"]
},
]
// 判断 sex
for (let i = 0; i < studentArray.length; i++) {
if (studentArray[i].sex == '男') {
document.write(`${studentArray[i].name}下课去下围棋<br />`)
} else if (studentArray[i].sex == '女') {
document.write(`${studentArray[i].name}下课去逛街<br />`)
}
}
//输出结果为: 张三下课去下围棋 李四下课去下围棋 王五下课去逛街
// 判断爱好
for (let i = 0; i < studentArray.length; i++) {
let like = studentArray[i];
for (let j = 0; j < like["like"].length; j++) {
if (like["like"][j] == "篮球") {
document.write(like["name"]);
}
}
}
//输出结果为: 李四
3 写出下面程序输出结果( ... 称字面量)
var arr1 =[1, 2, 3];
var arr2 = arr1;
var arr3 =[...arr1];
arr2[0]= 5;
console.log(arr1); //输出结果为: [5,2,3]
console.log(arr2);//输出结果为: [5,2,3]
console.log(arr3);//输出结果为: [1,2,3]
4 for循环(打印九九乘法表)
// 控制台展示
let str = '';
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
str += `${j}×${i}=${j*i}\t`
}
str += '\n'
}
console.log(str);
// 页面展示
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
document.write(`${j}×${i}=${i*j} `)
}
document.write("<br/>")
}
输出结果为:
5 for循环(根据输入成绩判断情况)
let result = prompt('请输入成绩');
if (result >= 90) {
alert("去动物园")
} else if (result >= 80) {
alert("去看电视")
} else if (result >= 60) {
alert("奖励一个鸡腿")
}else{
alert("挨打")
}
// 输入90包括90结果为: 去动物园
// 输入90包括80结果为: 去看电视
// 输入90包括60结果为: 奖励一个鸡腿
// 否则输出结果: 挨打
6 用flex布局(彩色盒子)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 100%;">
<!-- 头部 -->
<div style="width: 100%;height: 50px;background-color: red;"></div>
<!-- 中间 -->
<div style="display: flex;">
<!-- 左边 -->
<div style="flex: 1;height: 600px;background-color: rgb(18, 74, 228);"></div>
<!-- 中间 -->
<div style="flex: 2;">
<div style="display: flex;">
<div style="background-color: rgb(27, 223, 141);width: 50%;height: 50px;"></div>
<div style="background-color: rgb(134, 238, 195);width: 50%;height: 50px;"></div>
</div>
<div style="display: flex;">
<div style="flex: 2;">
<div style="background-color: rgb(183, 42, 211);height: 100px;"></div>
<div style="background-color: rgb(35, 210, 216);height: 180px;"></div>
</div>
<div style="flex: 6;background-color: rgb(218, 241, 9);height: 280px;"></div>
</div>
<div style="display: flex;">
<div style="flex: 6;">
<div style="background-color: rgb(41, 42, 114);height: 90px;"></div>
<div style="background-color: rgb(79, 128, 129);height: 180px;"></div>
</div>
<div style="flex: 2;background-color: rgb(241, 198, 9);height: 270px;"></div>
</div>
</div>
<!-- 右边 -->
<div style="flex: 1;height: 600px;background-color: rgb(18, 74, 228);"></div>
</div>
<!-- 底部 -->
<div style="width: 100%; height: 50px;background-color: rgb(14, 166, 226);"></div>
</div>
</body>
</html>