五嗅蔬、多重循環(huán)
在二重循環(huán)中剑按,外層循環(huán)變量變化一次,內(nèi)層循環(huán)變量變化整個
代碼:
<!DOCTYPE html>
<html>
<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>二重循環(huán)</title>
</head>
<body>
? ? <script>
? ? ? ? // 什么是二重循環(huán)澜术?循環(huán)里面嵌套循環(huán)
? ? ? ? // 在二重循環(huán)中艺蝴,外層循環(huán)變量變化一次,內(nèi)層循環(huán)變量變化整個
? ? ? ? for(let i=1;i<=3;i++){
? ? ? ? ? ? console.log('i='+i);
? ? ? ? ? ? //i為1時鸟废,j從1變化到3
? ? ? ? ? ? //i為2時猜敢,j從1變化到3
? ? ? ? ? ? //i為3時,j從1變化到3
? ? ? ? ? ? for(let j=1;j<=3;j++){
? ? ? ? ? ? ? ? console.log('j='+j);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? console.log('------------------------------------------');
? ? ? ? // 有三個班級盒延,每個班級有3名學員缩擂,輸入每個班級每個學員的考試成績,并計算出每個班級的平均分
? ? ? ? //第一層循環(huán)添寺,循環(huán)所有的班級
? ? ? ? for(let i=1;i<=3;i++){
? ? ? ? ? ? let sum = 0? //定義每個班級的總分
? ? ? ? ? ? alert(`請輸入第${i}個班級的學生成績`)
? ? ? ? ? ? //第二層循環(huán)胯盯,循環(huán)每個班級的所有學生
? ? ? ? ? ? for(let j=1;j<=3;j++){
? ? ? ? ? ? ? ? //將每一名學員的成績,累加給班級總分
? ? ? ? ? ? ? ? sum += parseInt(prompt(`請輸入第${i}個班級的第${j}名學員成績:`))
? ? ? ? ? ? }
? ? ? ? ? ? //計算每個班級的平均分
? ? ? ? ? ? let avg = sum / 3
? ? ? ? ? ? alert(`第${i}個班級的平均分是${avg}`)
? ? ? ? }
? ? </script>
</body>
</html>
彈窗顯示為(僅顯示第一個班級):
練習題
1.有三個班級计露,每個班級有四名學生博脑,輸入所有學生的成績,并計算出每個班級的平均分
代碼:
<!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>二重循環(huán)練習1</title>
</head>
<body>
? ? <script>
? ? ? ? // 有三個班級票罐,每個班級有四名學生叉趣,輸入所有學生的成績,并計算出每個班級的平均分
? ? ? ? // 并統(tǒng)計出每個班級里面的最高分和最低分
? ? ? ? //第一層循環(huán)胶坠,循環(huán)所有的班級
? ? ? ? for (let i = 1; i <= 3; i++) {
? ? ? ? ? ? let sum = 0? //定義每個班級的總分
? ? ? ? ? ? let max = 0? //定義每個班級的最高分
? ? ? ? ? ? let min = 100? //定義每個班級的最低分
? ? ? ? ? ? alert(`請輸入第${i}個班級的學生成績`)
? ? ? ? ? ? //第二層循環(huán)君账,循環(huán)每個班級的所有學生
? ? ? ? ? ? for (let j = 1; j <= 4; j++) {
? ? ? ? ? ? ? ? //將每一名學員的成績,累加給班級總分
? ? ? ? ? ? ? ? let score = parseInt(prompt(`請輸入第${i}個班級的第${j}名學員成績:`))
? ? ? ? ? ? ? ? // 判斷該學員的成績是否是最高分
? ? ? ? ? ? ? ? if(max<score){
? ? ? ? ? ? ? ? ? ? max = score? //重新獲取最高分
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 判斷該學員的成績是否是最低分
? ? ? ? ? ? ? ? if(min>score){
? ? ? ? ? ? ? ? ? ? min = score? //重新獲取最低分
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? sum += score
? ? ? ? ? ? }
? ? ? ? ? ? // //計算每個班級的平均分
? ? ? ? ? ? let avg = sum / 4
? ? ? ? ? ? alert(`第${i}個班級的平均分是${avg}沈善,班級最高分是${max}乡数,最低分是${min}`)
? ? ? ? }
? ? </script>
</body>
</html>
彈窗顯示為(僅顯示第一個班級):
2.(1)打印直角三角形
? (2)打印倒直角三角形
? (3)打印等腰三角形
? (4)打印倒等腰三角形
代碼:
<!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>二重循環(huán)練習2</title>
</head>
<body>
? ? <script>
? ? ? ? // 打印直角三角形
? ? ? ? /*
? ? ? ? ? ? #
? ? ? ? ? ? ##
? ? ? ? ? ? ###
? ? ? ? ? ? ####
? ? ? ? ? ? #####
? ? ? ? */
? ? ? ? console.log('----------------直角(1 2 3 4 5)------------------');
? ? ? ? // 外層循環(huán)控制行數(shù)? ?
? ? ? ? for (let i = 1; i <= 5; i++) {
? ? ? ? ? ? let str = ""
? ? ? ? ? ? // 內(nèi)層循環(huán)控制每行的列數(shù)(每行的列數(shù)===行號)
? ? ? ? ? ? for (let j = 1; j <=i; j++) {
? ? ? ? ? ? ? ? str += '#'
? ? ? ? ? ? }
? ? ? ? ? ? console.log(str);
? ? ? ? }
? ? ? ? console.log('----------------直角(1 3 5 7 9)------------------');
? ? ? ? /*
? ? ? ? ? ? #
? ? ? ? ? ? ###
? ? ? ? ? ? #####
? ? ? ? ? ? #######
? ? ? ? ? ? #########
? ? ? ? */
? ? ? ? // 外層循環(huán)控制行數(shù)? ?
? ? ? ? for (let i = 1; i <= 5; i++) {
? ? ? ? ? ? let str = ""
? ? ? ? ? ? // 內(nèi)層循環(huán)控制每行的列數(shù)(每行的列數(shù)===行號*2-1)
? ? ? ? ? ? for (let j = 1; j <=i*2-1; j++) {
? ? ? ? ? ? ? ? str += '#'
? ? ? ? ? ? }
? ? ? ? ? ? console.log(str);
? ? ? ? }
? ? ? ? console.log('----------------倒直角(5 4 3 2 1)------------------');
? ? ? ? /*
? ? ? ? ? ? #####
? ? ? ? ? ? ####
? ? ? ? ? ? ###
? ? ? ? ? ? ##
? ? ? ? ? ? #
? ? ? ? */
? ? ? ? // 外層循環(huán)控制行數(shù)? ?
? ? ? ? for (i=1;i<=5;i++) {
? ? ? ? ? ? let str = ""
? ? ? ? ? ? // 內(nèi)層循環(huán)控制每行的列數(shù)
? ? ? ? ? ? for (let j = 6-i; j > 0; j--) {
? ? ? ? ? ? ? ? str += '#'
? ? ? ? ? ? }
? ? ? ? ? ? console.log(str);
? ? ? ? }
? ? ? ? console.log('-----------------等腰-----------------');
? ? ? ? /*
? ? ? ? ? ? @@@@
? ? ? ? ? ? @@@
? ? ? ? ? ? @@
? ? ? ? ? ? @
? ? ? ? ? ? #
? ? ? ? ? ? ###
? ? ? ? ? ? #####
? ? ? ? ? ? #######
? ? ? ? ? ? #########
? ? ? ? ? ? @@@@#
? ? ? ? ? ? @@@###
? ? ? ? ? ? @@#####
? ? ? ? ? ? @#######
? ? ? ? ? ? #########
? ? ? ? */
? ? ? ? // 外層循環(huán)控制行數(shù)? ?
? ? ? ? for (let i = 1; i <= 5; i++) {
? ? ? ? ? ? let str = ""
? ? ? ? ? ? // 內(nèi)層第一個for椭蹄,用于補充空格
? ? ? ? ? ? for (let j = 5-i; j > 0; j--) {
? ? ? ? ? ? ? ? str += ' '
? ? ? ? ? ? }
? ? ? ? ? ? // 內(nèi)層第二個for,用于打印字符
? ? ? ? ? ? for (let j = 1; j <=i*2-1; j++) {
? ? ? ? ? ? ? ? str += '#'
? ? ? ? ? ? }
? ? ? ? ? ? console.log(str);
? ? ? ? }
? ? ? ? console.log('-----------------倒等腰-----------------');
? ? ? ? /*
? ? ? ? ? ? #########
? ? ? ? ? ? @#######
? ? ? ? ? ? @@#####
? ? ? ? ? ? @@@###
? ? ? ? ? ? @@@@#
? ? ? ? */
? ? ? ? // 外層循環(huán)控制行數(shù)? ?
? ? ? ? for (let i = 5; i >=1; i--) {
? ? ? ? ? ? let str = ""
? ? ? ? ? ? // 內(nèi)層第一個for净赴,用于補充空格
? ? ? ? ? ? for (let j = 5-i; j > 0; j--) {
? ? ? ? ? ? ? ? str += ' '
? ? ? ? ? ? }
? ? ? ? ? ? // 內(nèi)層第二個for绳矩,用于打印字符
? ? ? ? ? ? for (let j = 1; j <=i*2-1; j++) {
? ? ? ? ? ? ? ? str += '#'
? ? ? ? ? ? }
? ? ? ? ? ? console.log(str);
? ? ? ? }
? ? </script>
</body>
</html>
控制臺顯示:
3.打印空心的等腰三角形
代碼:
<!DOCTYPE html>
<html>
<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>二重循環(huán)練習3</title>
</head>
<body>
? ? <script>
? ? ? ? // 打印空心的等腰三角形
? ? ? ? /*
? ? ? ? ? ? @@@@#
? ? ? ? ? ? @@@# #
? ? ? ? ? ? @@#? #
? ? ? ? ? ? @#? ? #
? ? ? ? ? ? #########
? ? ? ? */
? ? ? ? // 外層循環(huán),用于循環(huán)行數(shù)? ?
? ? ? ? for (let i = 1; i <= 5; i++) {
? ? ? ? ? ? let str = ""
? ? ? ? ? ? // 該循環(huán)玖翅,用于控制每行前面的空格
? ? ? ? ? ? for (let j = 5 - i; j >= 1; j--) {
? ? ? ? ? ? ? ? str += " "
? ? ? ? ? ? }
? ? ? ? ? ? // 內(nèi)層循環(huán)翼馆,控制每行的列數(shù)
? ? ? ? ? ? for (let j = 1; j <= i * 2 - 1; j++) {
? ? ? ? ? ? ? ? //每行第一列和最后一列打印#號,其他地方打印空格
? ? ? ? ? ? ? ? //或是第五行金度,打印全部#號
? ? ? ? ? ? ? ? if (j === 1 || j === i * 2 - 1 || i === 5) {
? ? ? ? ? ? ? ? ? ? str += "#"
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? str += " "
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? console.log(str);
? ? ? ? }
? ? </script>
</body>
</html>
控制臺顯示:
4.打印99乘法表
代碼:
<!DOCTYPE html>
<html>
<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>二重循環(huán)練習4</title>
</head>
<body>
? ? <script>
? ? ? ? // 打印99乘法表
? ? ? ? /*
? ? ? ? ? ? 1*1=1
? ? ? ? ? ? 1*2=2 2*2=4
? ? ? ? ? ? 1*3=3 2*3=6 3*3=9
? ? ? ? ? ? ......
? ? ? ? */
? ? ? ? // 整體的形狀是:直角三角形? ?
? ? ? ? for(let i=1;i<=9;i++){
? ? ? ? ? ? let str = ""
? ? ? ? ? ? for(let j=1;j<=i;j++){
? ? ? ? ? ? ? ? str+=j+"X"+i+'='+(j*i)+'\t'
? ? ? ? ? ? }
? ? ? ? ? ? console.log(str);
? ? ? ? }
? ? </script>
</body>
</html>
控制臺顯示:
5.數(shù)字等腰三角形
<!DOCTYPE html>
<html>
<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>二重循環(huán)練習5</title>
</head>
<body>
? ? <script>
? ? ? ? // 數(shù)字等腰三角形
? ? ? ? /*
? ? ? ? ? ? ? ? 1
? ? ? ? ? ? ? 121
? ? ? ? ? ? ? 12321
? ? ? ? ? ? 1234321
? ? ? ? ? ? 123454321
? ? ? ? ? ? 第一部分:
? ? ? ? ? ? @@@@
? ? ? ? ? ? @@@
? ? ? ? ? ? @@
? ? ? ? ? ? @
? ? ? ? ? ? 第二部分:
? ? ? ? ? ? 1
? ? ? ? ? ? 12
? ? ? ? ? ? 123
? ? ? ? ? ? 1234
? ? ? ? ? ? 12345
? ? ? ? ? ? 第三部分
? ? ? ? ? ? 1
? ? ? ? ? ? 21
? ? ? ? ? ? 321
? ? ? ? ? ? 4321
? ? ? ? */
? ? ? ? //外層循環(huán)应媚,控制行數(shù)
? ? ? ? for (let i = 1; i <= 5; i++) {
? ? ? ? ? ? // 內(nèi)層循環(huán)控制每行打印內(nèi)容
? ? ? ? ? ? let str = ""
? ? ? ? ? ? // 1.打印左邊的空格
? ? ? ? ? ? for(let j=1;j<=5-i;j++){
? ? ? ? ? ? ? ? str += "@"? ? ? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? ? ? // 2.打印三角形的左側(cè)
? ? ? ? ? ? for(let j=1;j<=i;j++){
? ? ? ? ? ? ? ? str+=j
? ? ? ? ? ? }
? ? ? ? ? ? // 3.打印三角形的右側(cè)
? ? ? ? ? ? for(let j=i-1;j>=1;j--){
? ? ? ? ? ? ? ? str+=j
? ? ? ? ? ? }
? ? ? ? ? ? console.log(str);
? ? ? ? }
? ? </script>
</body>
</html>
控制臺顯示:
6.找出100以內(nèi)所有的質(zhì)數(shù)
代碼:
<!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>二重循環(huán)練習6</title>
</head>
<body>
? ? <script>
? ? ? ? // 找出100以內(nèi)所有的質(zhì)數(shù)
? ? ? ? // 什么是質(zhì)數(shù)?只能被1 和 自身整除的數(shù) 是質(zhì)數(shù)
? ? ? ? // 第一層循環(huán)確定查找的范圍
? ? ? ? for(let i=2;i<=100;i++){
? ? ? ? ? // 定義一個count猜极,用于記錄被整除的次數(shù)
? ? ? ? ? let count = 0
? ? ? ? ? ? // 第二層循環(huán)中姜,確定每次比較的范圍
? ? ? ? ? ? for(let j=1;j<=i;j++){
? ? ? ? ? ? ? ? // 假設(shè)i是25,j從1到25
? ? ? ? ? ? ? ? if(i%j===0){
? ? ? ? ? ? ? ? ? ? count++
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //如果跟伏,只有兩個數(shù)能被i整除丢胚,那么i就是質(zhì)數(shù)
? ? ? ? ? ? if(count===2){
? ? ? ? ? ? ? ? console.log(i);
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>
控制臺顯示:
在內(nèi)層循環(huán)中,使用continue,break受扳,只是作用于內(nèi)層循環(huán)
代碼:
<!DOCTYPE html>
<html>
<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>在內(nèi)層循環(huán)中携龟,使用continue,break</title>
</head>
<body>
? ? <script>
? ? ? ? /*
? ? ? ? ? ? 有5家店,每家店最多可以買3件衣服勘高,進入一家店后峡蟋,提示是否離開本店,
? ? ? ? ? ? 輸入y表示離開(會進入下一家店)相满,輸入n表示買一件衣服层亿,最后輸出用戶一共買了多少件衣服。
? ? ? ? */
? ? ? ? let count = 0? //定義count立美,保存購買衣服的總數(shù)量
? ? ? ? //外層循環(huán)匿又,控制有多少家店
? ? ? ? for(let i=1;i<=5;i++){
? ? ? ? ? ? alert('歡迎光臨第'+i+'家店')
? ? ? ? ? ? //內(nèi)層循環(huán),控制每家店建蹄,可以買多少件衣服
? ? ? ? ? ? for(let j=1;j<=3;j++){
? ? ? ? ? ? ? ? let isLeave = prompt('是否離開(y/n):')
? ? ? ? ? ? ? ? if(isLeave==='n'){
? ? ? ? ? ? ? ? ? ? alert('成功購買了一件衣服')
? ? ? ? ? ? ? ? ? ? count++
? ? ? ? ? ? ? ? ? ? // 內(nèi)層循環(huán)里面的continue碌更,只是對內(nèi)層循環(huán)起作用
? ? ? ? ? ? ? ? ? ? continue
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //內(nèi)層循環(huán)里面的break,只是對內(nèi)層循環(huán)起作用
? ? ? ? ? ? ? ? break;?
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? alert('您一共購買了'+count+'件衣服')
? ? </script>
</body>
</html>