七天學完JavaScript(day03)
for回圈
? for回圈基本使用
? 退出回圈
? 回圈嵌套
for回圈基本使用
for回圈語法
通過經典案例來理解
- 利用for回圈輸出1~100歲
<!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>
<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-100之間所有的偶數和
<!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>
<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>
結果圖
- 頁面中列印5個小星星
<!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>
<script>
//后面會寫嵌套輸出星星陣型,這里簡單看看
for(let i = 1; i <= 5; i++){
document.write('*')
}
</script>
</body>
</html>
4. for回圈的最大作用： 回圈陣列(遍歷陣列)
將陣列 [‘小東’，‘小李’， '小紅’, ‘小明’] 依次列印出來
<!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>
<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>
如果不想寫陣列長度,可以用[陣列名].length得出陣列長度
<!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>
<script>
let name = ['小東', '小李', '小紅', '小明']
//可以document.write(name.length)知道陣列長度
for(let i = 0; i < name.length; i++){
document.write(name[i])
}
</script>
</body>
</html>
小提示:
for回圈和while回圈的區別：
當如果明確了回圈的次數的時候推薦使用for回圈
當不明確回圈的次數的時候推薦使用while回圈
退出回圈：
continue：結束本次回圈，繼續下次回圈
直白解釋:12345到3我continue,結果就是1245
break：跳出所在的回圈
直白解釋:12345到3我break,結果就是12
嵌套回圈
語法:
一個回圈里再套一個回圈，一般用在for回圈里
通過代碼案例理解
假如老板每天賣5份河粉,三天的河粉銷售記錄
<!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>
<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>
結果圖
看輸出結果理解i,j的回圈**,外部i回圈1次,內部j回圈5次**然后就是接著外部第二次回圈,內部回圈5次,外部第三次回圈,內部在回圈5次,最后判斷外部回圈結束,程式結束
理解了內外嵌套,再看看這兩個例子
用戶輸入行數和列數，列印對應的星星
<!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>
<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">
<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>
<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">
<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>
<style>
div {
display: inline-block;
height: 25px;
line-height: 25px;
margin: 5px;
/* 不想要格子顏色可以洗掉這行 */
background-color: pink;
padding: 0 10px;
/* 這是邊框顏色,可以改成黑色 */
border: 1px solid hotpink;
/* 不要字體顏色刪這行 */
color: deeppink;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0, 0, 0,.2);
}
</style>
</head>
<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>
結果圖(可以看代碼注釋刪幾行代碼去掉顏色)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/377108.html
標籤：其他
上一篇：前端之JSON詳解
下一篇：側邊欄關閉時SVG不顯示