七天学完JavaScript(day03)

for循环

• for循环基本使用
• 退出循环
• 循环嵌套

for循环基本使用

for循环语法

1. 利用for循环输出1~100岁
``````<!DOCTYPE html>
<html lang="en">
<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>
<body>
<script>
//声明变量,num起始值是1,i用来记录循环次数
let num = 1
let i = 1
//1<=100,就是循环100次,每循环一次i+1
for(i; i <= 100;i++){
//输出num
document.write(num)
//输出后num+1,下一次输出
num += 1
document.write('<br>')//<br>用来换行
}
</script>
</body>
</html>
``````

1. 求1-100之间所有的偶数和
``````<!DOCTYPE html>
<html lang="en">

<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>

<body>
<script>
let i = 1
let sum = 0                //变量sum用来存放和,起始值是0
while (i <= 100) {         //i规定循环范围
if (i % 2 == 0) {      //用i % 2 == 0筛选出偶数
sum = i + sum      //sum存放每循环一次加上来的偶数的和
i++                //循环次数+1
} else {
i++                //如果不符合循环,不加到sum里,但是循环次数加1
}
}
document.write(sum)        //循环结束输出sum
</script>
</body>

</html>
``````

1. 页面中打印5个小星星
``````<!DOCTYPE html>
<html lang="en">
<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>
<body>
<script>
//后面会写嵌套输出星星阵型,这里简单看看
for(let i = 1; i <= 5; i++){
document.write('*')
}
</script>
</body>
</html>
``````

4. for循环的最大作用： 循环数组(遍历数组)

``````<!DOCTYPE html>
<html lang="en">
<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>
<body>
<script>
//声明一个数组name
let name = ['小东', '小李', '小红', '小明']
//因为数组下边从0开始,输出name[i],所以i也从0开始
// i从0开始,<4,循环四次,正好打印完
for(let i = 0; i < 4; i++){
document.write(name[i])
}
</script>
</body>
</html>
``````

``````<!DOCTYPE html>
<html lang="en">
<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>
<body>
<script>
let name = ['小东', '小李', '小红', '小明']
//可以document.write(name.length)知道数组长度
for(let i = 0; i < name.length; i++){
document.write(name[i])
}
</script>
</body>
</html>
``````

for循环和while循环的区别：

continue：结束本次循环，继续下次循环

break：跳出所在的循环

``````<!DOCTYPE html>
<html lang="en">
<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>
<body>
<script>
//i是3天
for(let i = 1; i < 4; i++){
document.write(`第\${i}天`, '<br>')//<br>用来换行
//j是每天5份河粉
for(let j = 1 ; j < 6; j++){
document.write(`卖了第\${j}份河粉`, '<br>')
}
}
/* 看输出结果理解i,j的循环,外部i循环1次,内部j循环5次 */
</script>
</body>
</html>
``````

``````<!DOCTYPE html>
<html lang="en">

<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>

<body>
<script>
let row = prompt('请输入打印行数')
let col = prompt('请输入打印列数')
for (let j = 1; j <= row; j++) {
for (let i = 1; i <= col; i++) {
document.write('*')
}
document.write('<br>')
}
</script>
</body>

</html>
``````

``````<!DOCTYPE html>
<html lang="en">
<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>
<body>
<script>
let row = prompt('请问打印几行?')
for(let j = 1; j <= row ; j++){
for(let i = 1; i <= j; i++){
document.write('*')
}
document.write('<br>')
}
</script>
</body>
</html>
``````

``````<!DOCTYPE html>
<html lang="en">

<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>
<style>
div {
display: inline-block;
height: 25px;
line-height: 25px;
margin: 5px;
/* 不想要格子颜色可以删除这行 */
background-color: pink;
/* 这是边框颜色,可以改成黑色 */
border: 1px solid hotpink;
/* 不要字体颜色删这行 */
color: deeppink;
box-shadow: 2px 2px 2px rgba(0, 0, 0,.2);
}
</style>

<body>
<script>
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
document.write(`
<div> \${j} x \${i} = \${j*i} </div>
`)
}
document.write('<br>')
}
</script>
</body>

</html>
``````

THE END