0
0

JS(第八课)循环语句中常用到的案例

u认识循环语句

uwhile****循环

udo...while****循环

ufor**循环(循环嵌套)**

ubreak、continue

认识循环:

u在开发中我们经常需要做各种各样的循环操作：

u比如把一个列表中的商品、歌曲、视频依次输出进行展示；

u比如对一个列表进行累加计算；

u比如运行相同代码将数字1到10逐个输出；

u循环 是一种重复运行同意代码的方法。

u如果是对某一个列表进行循环操作，我们通常也会称之为遍历或者迭代；

u在JavaScript中支持三种循环方式：

uwhile循环

udo...while循环

ufor循环

通过一个小案例了解三个语句的语法结构:

54364884f54f41f1a6c4ebeab8a0ceb6.png
while的循环的条件是什么呀！

c098ecd435d6465f9ea8ae41b8fb8a73.png

这是上面的结果

bfb07bdc265d40a881be58f7e3a41e5b.png
如果在上面加上一句话呢结果为几呀!

1bc3295e7d8a49328d5ae3e8b6bef9ad.png
这是结果

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <!-- !while语句如何去理解呀思考一下 -->
  13.     <script>
  14.         // 用户定义一个变量 给变量的初始值为0
  15.         // 在这个案例中 
  16.         // 定义的var i的初始值为 0
  17.         var i = 0;
  18.         //  while(写出上面定义变量的条件)
  19.         // 在这个案例中的条件是当 i<2是
  20.         while (i < 2) {
  21.             // 如果上面的条件成立那么走下面的语句
  22.             // 如果上面i<2条件成立那么打印下面的语句信息
  23.             document.write('<h1>请输出i的值' + i + '</h1><br>')
  24.             i++
  25.         }
  26.         //  如果条件不成立那么程序走下面的语句
  27.         // 如果上面的条件不成立那么执行下面的语句信息
  28.         document.write('<h1>请输出结束i的值' + i + '</h1><br>')
  29.     </script>
  30. </body>
  32. </html>

while 循环执行的顺序：

// 用户定义一个变量 给变量的初始值为0
// 在这个案例中 我要打印输出 1到三的值
// 定义的var i的初始值为 0
var i = 0;
// while(写出上面定义变量的条件)
// 在这个案例中的条件是当 i<2是
while (i < 2) {
// 如果上面的条件成立那么走下面的语句
// 如果上面i<2条件成立那么打印下面的语句信息
** document.write('

请输出i的值' + i + '


')
** i++
}
// 如果条件不成立那么程序走下面的语句
// 如果上面的条件不成立那么执行下面的语句信息
** document.write('

请输出结束i的值' + i + '


')**

c9630679df8048128541612ddc401de6.png

04d10ba21642466b91f9db941048d1dc.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <script>
  13.         // 都会进行一次循环 
  14.         // 用户定义的变量为 i 初始值为 1
  15.         var i=1;
  16.         // 如果在下面的while(条件成立的话则走下面)do{中间的循环语句信息}
  17.         do {
  18.              document.write('<h1>请输出i的值' + i + '</h1><br>');
  19.             i++
  20.         } while (i <=1)
  21.         // 如果上面的条件不成立打印输出下面的信息内容
  22.          document.write('<h1>请输出结束i的值' + i + '</h1><br>');
  23.         // 通过浏览器的循环条件你会发现内容 无论如何 do{}whiler()语句都会执行一次 比如上面的案例 打印出了
  24.         // 1 2
  25.     </script>
  26. </body>
  28. </html>

do...while循环执行顺序:

// do...while都会进行一次循环
// 用户定义的变量为 i 初始值为 1
var i=1;
// 如果在下面的while(条件成立的话则走下面)do{中间的循环语句信息}
do {
document.write('

请输出i的值' + i + '


');
** i++**
} while (i <=1)
// 如果上面的条件不成立打印输出下面的信息内容
** document.write('

请输出结束i的值' + i + '


');**
// 通过浏览器的循环条件你会发现内容 无论如何 do{}whiler()语句都会执行一次 比如上面的案例打印出了
// 1 2

0b41c16957d24bf3ba56f0e2502c6563.png

1e357eea71524f529faa2f06dcab027f.png

for循环的执行顺序:

// for循环的语句执行顺序
// 用户声明变量的起点位置在哪里
var i = 0;
// for(第一个位置填循环的起点位置;第二个空填写循环的条件;第三个空填写变量是++ 还是--)
for (i; i < 3; i++) {
// 如果上面三个位值的条件都满足的话 那么执行下面的语句信息
** **document.write('

请输出i的值' + i + '


');
}
// 如果条件不满足的话输出下面的语句
document.write('

请输出结束i的值' + i + '


');

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>for循环语句</title>
  9. </head>
  11. <body>
  13.     <script>
  14.         // for循环的语句执行顺序
  15.         // 用户声明变量的起点位置在哪里
  16.         var i = 0;
  17.         // for(第一个位置填循环的起点位置;第二个空填写循环的条件;第三个空填写变量是++ 还是--)
  18.         for (i; i < 3; i++) {
  19.             // 如果上面三个位值的条件都满足的话 那么执行下面的语句信息
  20.             document.write('<h1>请输出i的值' + i + '</h1><br>');
  21.         }
  22.         // 如果条件不满足的话输出下面的语句
  23.         document.write('<h1>请输出结束i的值' + i + '</h1><br>');
  24.     </script>
  26. </body>
  28. </html>

经过上面的一个案例对于三个语句的语法结构有了解吧！

采用上面讲的三个方案自己实现一下下面的题目 采用的上面三种循环

  1. 请用户在控制台打印出自己的名字10次
  2. 请用户在浏览器打印出自己的名字100次
  3. 请用户在弹窗打印出自己的名字5次
  4. 请用户在浏览器中，控制台中打印出自己的0到一百的数字
  5. 请用户在浏览器中，控制台中打印出自己的0到一百的数字；并且将和求出来,求出0到100的平均数.
  6. 请用户在浏览器中，控制台中打印出自己的0到一百的数字；并且将和求出来,求出0到100的平均数.求出奇数和
  7. 请用户在浏览器中，控制台中打印出自己的0到一百的数字；并且将和求出来,求出0到100的平均数.求出偶数和
  8. 请用户在浏览器中，控制台中打印出自己的0到一百的数字；并且在控制台打印能被3 7 9整除的数字
  9. 请用户在浏览器中，控制台中打印出自己的0到一百的数字；并且在控制台打印能被5整除的数字
  10. 请用户在浏览器中，控制台中打印出1到1000的所有的素数；

案例一:游戏规则一 熟练的操作if else 的语句

  1. <!-- !生成随机数一到100内 -->
  2.  游戏规则

** Math.floor(Math.random() * 50); 随机生成随机数**
电脑随机生成随机数 两个 数据 让用户猜出数字的范围 电脑随机生成1到50的数字信息
如果用户两个数的和在50到100以内 则在控制台浏览器弹出框显示内容弹出你猜的数字正好在50到100之间
如果用户在两个数的和在23到49以内 则控制台浏览器弹出框显示内容数字范围在两个数的和在23到49以内
如果用户在两个数的和在100到1000以内 则控制台浏览器弹出框显示内容数字范围在两个数的和在100到1000内

  1. 如果用户两个数的乘在1到100以内 则在控制台浏览器弹出框显示内容弹出你猜的数字正好在0到100之间
  2.  如果用户在两个数乘在100到500以内 则控制台浏览器弹出框显示内容数字范围在两个数的和在100到500以内
  3.  如果用户在两个数乘在501到1000以内 则控制台浏览器弹出框显示内容数字范围在两个数的和在
  4.  
  5.  如果用户两个数的相除在1到10以内 则在控制台浏览器弹出框显示内容弹出你猜的数字正好在1到10之间
  6.  如果用户在两个数除在10到20以内 则控制台浏览器弹出框显示内容数字范围在两个数的和在10到20以内
  7.  如果用户在两个数chu在21到30以内 则控制台浏览器弹出框显示内容数字范围在两个数的和在21到30内
  9. else 弹出内容输入有误
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>猜数字游泳</title>
  9. </head>
  10. <body>
  11.     <script>
  12.         // 利用对象生成第一个数
  13.         var math1 = Math.floor(Math.random() * 50);
  14.         var math2 = Math.floor(Math.random() * 50);
  15.         // 方法一 定义第三变量
  16.         var m = math1 + math2;
  17.         var n = math1 * math2;
  18.         var k = math1 / math2;
  19.         var o = math2 / math1
  20.         // if 语句
  21.         if (m >= 50 && m < 100) {
  22.             document.write("");
  23.             console.log("");
  24.             alert("");
  25.         }
  26.         if (m > 23 && m <= 49) {
  27.             document.write("")
  28.             console.log("");
  29.             alert("");
  30.         }
  32.         if (m > 100 && m <= 1000) {
  33.             document.write("")
  34.             console.log("");
  35.             alert("");
  36.         }
  38.         // 方法二  if else 循环
  39.         if (n >= 50 && n < 100) {
  40.             document.write("");
  41.             console.log("");
  42.             alert("");
  43.         }
  45.         else
  46.             if (n > 23 && n <= 49) {
  47.                 document.write("")
  48.                 console.log("");
  49.                 alert("");
  50.             }
  51.             else
  52.                 if (n > 100 && n <= 1000) {
  53.                     document.write("")
  54.                     console.log("");
  55.                     alert("");
  56.                 }
  58.         // var o = math2 / math1
  59.         // 如果math1>math2 则去出var k = math1 / math2;
  60.         if (math1 > math2) {
  61.             if (k > 1 && k < 10 || k > 10 && k < 20 || k > 21 && k < 30) {
  62.                 document.write("则在控制台浏览器弹出框显示内容弹出随机数数" + math1 + "到" + math2)
  63.                 console.log("则在控制台浏览器弹出框显示内容弹出随机数数" + math1 + "到" + math2);
  64.                 alert("则在控制台浏览器弹出框显示内容弹出随机数数" + math1 + "到" + math2);
  65.             } else {
  66.                 alert("内容不存在")
  67.             }
  69.         } else {
  70.             // var o = math2 / math1
  71.             if (o > 1 && o < 10 || o > 10 && o < 20 || o > 21 && o < 30) {
  72.                 document.write("则在控制台浏览器弹出框显示内容弹出随机数数" + math2 + "到" + math1)
  73.                 console.log("则在控制台浏览器弹出框显示内容弹出随机数数" + math2 + "到" + math1);
  74.                 alert("则在控制台浏览器弹出框显示内容弹出随机数数" + math2 + "到" + math1);
  75.             } else {
  76.                 alert("内容不存在")
  77.             }
  79.         }
  81.         alert(math1);
  82.         alert(math2);
  83.         document.write(math1);
  84.         document.write(math2)
  85.         console.log(math1);
  86.         console.log(math2)
  88.     </script>
  90. </body>
  92. </html>

案例二 :游戏规则 二熟练的操作if else 的语句 加上 For循环

电脑随机生成一个数 与用户的数据比较 猜两个数字之间的大小 用户猜数字的大小机会只有 7次

  1.  <!-- !生成随机数一到100内 -->
  2.  <script>
  3.      // 利用对象生成第一个数
  4.      var num1 = Math.floor(Math.random() * 100);
  5.      console.log(num1);
  6.      // 第二步让用户输入第二个数
  7.      // 判断了七次
  8.      var num2 = 1;
  9.      for (num2; num2 <= 10; num2++) {
  10.          // 判断程序是否有问题
  11.          debugger
  12.          // confirm("开始进行猜数字")
  13.          confirm("开始执行数据")
  14.          var num3 = prompt("请用户输入1到100之间的数字");
  15.          if (num1 == num3) {
  16.              alert("猜对了")
  17.              break
  18.          } else if (num1 < num3) {
  19.              alert("猜大了")
  20.          } else if (num1 > num3) {
  21.              alert("猜小了")
  22.          } else if (num2 > 7) {
  23.              alert("次数用完了" + num1)
  24.          }
  25.          //    这是用户的次数
  26.          console.log(num2);
  27.          // 这是接收用户的数字
  28.          console.log(num3)
  29.          continue;
  30.      }
  31.  </script>

案例三 游戏规则三 if else 的语句 do whilter循环 :

电脑随机生成一个数 与用户的数据比较 猜两个数字之间的大小 

  1. <!DOCTYPE html
  2.      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  <html xmlns="http://www.w3.org/1999/xhtml">
  4.      <head>
  5.          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.          <title>猜数游戏</title>
  7.          <script type="text/javascript">
  8.              var num = Math.floor(Math.random() * 100 + 1);
  9.              var num = Math.floor(Math.random() * 100 + 1);
  10.              do {
  11.                  var guess = parseInt(prompt("下面进行猜数游戏\n请输入1-100之间的整数：", ""));
  12.                  var he = parseInt(prompt("下面进行猜数游戏\n请输入1-100之间的整数：", ""));    
  13.                  if (guess == num, he == num) {
  14.                      alert("^_^ ,恭喜你，猜对了，幸运数字是：" + num);
  15.                      break;
  16.                  } else {
  17.                      if (guess > num, he > num) {
  18.                          alert("^_^ ,你猜的数字大了");
  19.                          go_on = confirm("是否继续游戏？");
  20.                      } else {
  21.                          alert("^_^ ,你猜的数字小了");
  22.                          go_on = confirm("是否继续游戏？");
  23.                      }
  24.                  }
  25.              } while (go_on);
  26.              alert("谢谢参与游戏！");
  27.          </script>
  28.      </head>
  30.      <body>
  31.      </body>
  32.  </html>

案例四 水仙花数

水仙花数是指一个3位数，它的每个位上的数字的3次幂之和等于它本身，例如：13+53+3^3=153。

gegege+shishishi+baibaibai==tyu

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <!--立方和中的水仙花束  -->
  13.     <script>
  14.         var tyu = prompt("请输入三位的数值");
  15.             ge = tyu % 10,
  16.             shi = parseInt(tyu / 10) % 10,
  17.             bai = parseInt(tyu / 100) % 100,
  18.         console.log("输入个位数值" + ge);
  19.         console.log("输入十位数值" + shi);
  20.         console.log("输入百位数值" + bai);
  21.         if(ge*ge*ge+shi*shi*shi+bai*bai*bai==tyu){
  22.             alert("个位的值为"+ge);
  23.             alert("十位的值为"+shi);
  24.             alert("百位的值为"+bai);
  25.             document.write("输出水仙花束的值为"+tyu)
  26.         } else{
  27.             document.write("输出不是水仙花束的值为"+tyu)
  28.         }
  29.     </script>
  30. </body>
  32. </html>

案例四 输出电影座位的问题 两层 for循环 加上 if判断 加上逻辑运算符

利用二层for循环打印出 第一排 3号位 和 第3排 9号位的信息 以收礼

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <!-- 第一排 6 第三排 9号 以完 -->
  13.     <script>
  14.         // 弹出表格信息
  15.         document.write("<table align='center' border=3>");
  16.         // 打印的排数 打印的是tr
  17.         for (var i = 1; i <= 10; i++) {
  18.             document.write("<tr height=70>");
  19.             // 打印的是td
  20.             for (var j = 1; j <= 10; j++) {
  21.                 if (i == 1 && j == 6) {
  22.                     document.write("<td align='center' width=80 background=yes.png>以收礼</td>");
  23.                     continue;
  24.                 }
  26.                 if (i == 3 && j == 9) {
  27.                     document.write("<td align='center' width=80 background=yes.png>以收礼</td>");
  28.                     continue;
  29.                 }
  31.                 //输出
  32.                 document.write("<td align='center' width=80 background=no.png>" + i + "排" + j + "座" + "</td>");
  33.             }
  34.             // 输出排号 座位号
  35.             document.write("</tr>")
  37.         }
  38.         document.write("</table");
  40.     </script>
  41. </body>
  43. </html>

案例五 九九法表

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  13.     <script>
  14.         // 行数
  15.         // for (var i = 0; i < 10; i++) {
  16.             个数
  17.             // for (var k = 0; k < 34; k++) {
  18.                 // document.write("*")
  20.             // }
  21.             // document.write("<br>")
  22.         // }
  23.     </script>
  25. <!-- 心 -->
  26. <!-- 心心 -->
  27. <!-- 心心心 -->
  29.     <script>
  30.         //  <!-- 九九乘法表 -->
  31.         document.write("<table border='1'>")
  32.         for (var i = 1; i <=9; i++) {
  33.             for (var j = 1; j<=i; j++) {
  34.                 // document.write("*")
  35.                  //输出“列*行=结果”
  36.                        document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");
  37.             }
  38.             document.write("<br>")
  39.            
  40.         }
  41.     </script>
  43. </body>
  45. </html>

案例六

打印出表格的行 单元格 表格 并插入图片

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=0009E265.png, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     table {
  12.         background-color: rgb(9, 231, 39);
  13.     }
  15.     td {
  16.         height: 100px;
  17.         width: 200px;
  18.         background-color: cornsilk;
  19.     }
  21.     td:hover {
  22.         background-color: rgb(24, 24, 24);
  23.         height: 50px;
  24.         width: 40px;
  25.         color: red;
  26.     }
  28.     h1 {
  29.         font-size: 100px;
  30.         background-color: red;
  31.     }
  32. </style>
  34. <body>
  35.     <!-- 打印表格一到一百的内容 -->
  36.     <script>
  37.         // 弹出表格信息
  38.         document.write("<table align='center' border=1>");
  39.         // 打印的排数 打印的是tr
  40.         for (var i = 1; i <= 6; i++) {
  41.             document.write("<tr height=70>");
  42.             // 打印的是td
  43.             // for (var j = 1; j <= 11; j++) {
  44.             //输出
  45.             document.write("<td align='center'>" + "编号" + i + "</td>");
  46.         }
  47.         // 输出排号 座位号
  48.         document.write("</tr>")
  49.         // }
  50.         document.write("</table");
  51.     </script>
  53.     <h1>理解行</h1>
  55.     <script>
  56.         // 弹出表格信息
  57.         document.write("<table align='center' border=1>");
  58.         // 打印的排数 打印的是tr
  59.         // for (var i = 1; i <= 10; i++) {
  60.         document.write("<tr height=70>");
  61.         // 打印的是td
  62.         for (var j = 1; j <= 6; j++) {
  63.             //输出
  64.             document.write("<td align='center'>" + "编号" + i + "</td>");
  65.         }
  66.         // 输出排号 座位号
  67.         document.write("</tr>")
  68.         // }
  69.         document.write("</table");
  70.     </script>
  71.     <h1>理解解单元格</h1>
  73.     <!-- 理解表格 -->
  74.     <!-- 打印表格一到一百的内容 -->
  75.     <script>
  76.         // 弹出表格信息
  77.         document.write("<table align='center' border=1>");
  78.         // 打印的排数 打印的是tr
  79.         for (var i = 1; i <= 6; i++) {
  80.             document.write("<tr height=70>");
  81.             // 打印的是td
  82.             for (var j = 1; j <= 6; j++) {
  83.                 //输出
  84.                 document.write("<td align='center';>" + "编号" + i + "</td>");
  85.             }
  86.             // 输出排号 座位号
  87.             document.write("</tr>")
  88.         }
  89.         document.write("</table");
  90.     </script>
  92.     <!-- 理解如何插入图片 -->
  93.     <!-- 理解表格 -->
  94.     <!-- 打印表格一到一百的内容 -->
  95.     <script>
  96.         // 弹出表格信息
  97.         document.write("<table align='center' border=1>");
  98.         // 打印的排数 打印的是tr
  99.         for (var i = 1; i <= 6; i++) {
  100.             document.write("<tr height=70>");
  101.             // 打印的是td
  102.             for (var j = 1; j <= 6; j++) {
  103.                 //输出
  104.                 // 打印出图片
  105.                 document.write("<td align='center';>" +"<img src='../for/img/download.png'>"+"</td>");
  106.             }
  107.             // 输出排号 座位号
  108.             document.write("</tr>")
  109.         }
  110.         document.write("</table");
  111.     </script>
  113. </body>
  115. </html>

案例九 对 一到一百的求和数字深度理解

// sum=sum+i
// 第一次 num=1 sum=0 sum=0+1 sum=sum+num
// 第二次 num=2 sum=1 sum=1+2; sum=sum+num
// 第三次 num=3 sum=3 sum=1+2+3 sum=sum+num
// 第四次 num=4 sum=6 sum=1+2+3+4 sum=sum+num
// 第五次 num=5 sum=10 sum=1+2+3+4+5 sum=sum+num
// 第六次 num=6 sum=15 sum=1+2+3+4+5+6 sum=sum+num
// 第七次 num=7 sum=21 sum=1+2+3+4+5+6+7 sum=sum+num

  1.  <script>
  2.      var i = 1, sum = 0;
  3.      while (i <= 100) {
  4.          sum += i;
  5.          i++;
  6.          document.write("一百的和为" + sum + "<br>");
  7.      }
  8.      var a = 1, sum1 = 0;
  9.      while (a <= 100) {
  10.          // if(num%2>0){
  11.          // }
  12.          sum1 += a;
  13.          a += 2;
  14.          document.write("一百的奇数为" + sum1 + "<br>");
  15.      }
  16.      console.log(sum1)
  17.  </script>
  18. ody>

上面是方案一

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>for循环语句</title>
  9. </head>
  11. <body>
  13.     <script>
  14.         // for循环的语句执行顺序
  15.         // 用户声明变量的起点位置在哪里
  16.         var i = 0;
  17.         // for(第一个位置填循环的起点位置;第二个空填写循环的条件;第三个空填写变量是++ 还是--)
  18.         for (i; i < 3; i++) {
  19.             // 如果上面三个位值的条件都满足的话 那么执行下面的语句信息
  20.             document.write('<h1>请输出i的值' + i + '</h1><br>');
  21.         }
  22.         // 如果条件不满足的话输出下面的语句
  23.         document.write('<h1>请输出结束i的值' + i + '</h1><br>');
  24.     </script>
  26.     <script>
  27.         // for循环
  28.         var i = 0;
  29.         for (i; i <= 100; i++) {
  30.             console.log(i)
  31.         }
  32.     // for (var i = i < 4; i++) {
  33.     // }
  34.     </script>
  36.     <script>
  37.         // for循环
  38.         var i = 0;
  39.         var sum = 0;
  40.         for (i; i <= 100; i++) {
  41.             sum = sum + i;
  42.             // sum+=i
  43.             console.log(sum)
  44.         }
  45.     </script>
  47.     <!-- 奇数 -->
  48.     <script>
  49.         // for循环
  50.         var i = 1;
  51.         var sum = 0;
  52.         for (i; i <= 100; i = i + 2) {
  53.             sum = sum + i;
  54.             // sum+=i
  55.             document.write(sum);
  56.         }
  57.     </script>
  59. </body>
  61. </html>

上面是方案二

案例十 打印矩阵

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <!-- 打印表格一到一百的内容 -->
  13.     <script>
  14.         // 弹出表格信息
  15.         //  document.write("<table align='center' border=3>");
  16.         // 打印的排数 打印的是tr
  17.         for (var i = 1; i <= 10; i++) {
  18.             //  document.write("<tr height=70>");
  19.             // 打印的是td
  20.             for (var j = 1; j <= 10; j++) {
  22.             }
  23.             // 输出排号 座位号
  24.             document.write("&nbsp;<br>")
  25.         }
  26.     //  document.write("</table");
  28.     </script>
  29. </body>
  31. </html>

案例十一 打印座位号

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     table{
  12.         background-color: rgb(175, 239, 183);
  13.     }
  14.     td{
  15.         height: 100px;
  16.         width: 200px;
  17.         background-color: cornsilk;
  18.     }
  19.     td:hover{
  20.         background-color: cadetblue;
  21.         height: 50px;
  22.         width: 40px;
  23.         color: red;
  24.     }
  25. </style>
  26. <body>
  27.    <!-- 打印表格一到一百的内容 -->
  28.     <script>
  29.         // 弹出表格信息
  30.         document.write("<table align='center' border=3>");
  31.         // 打印的排数 打印的是tr
  32.         for (var i = 1; i <= 100; i++) {
  33.             document.write("<tr height=70>");
  34.             // 打印的是td
  35.             for (var j = 1; j <= 11; j++) {
  36.                 //输出
  37.                 document.write("<td align='center'>"+"编号"+ i+"</td>");
  38.             }
  39.             // 输出排号 座位号
  40.             document.write("</tr>")
  42.         }
  43.         document.write("</table");
  45.     </script>
  46. </body>
  48. </html>

案例十二打印直角

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  13.     <script>
  14.         // 行数
  15.         // for (var i = 0; i < 10; i++) {
  16.             个数
  17.             // for (var k = 0; k < 34; k++) {
  18.                 // document.write("*")
  20.             // }
  21.             // document.write("<br>")
  22.         // }
  23.     </script>
  25. <!-- 心 -->
  26. <!-- 心心 -->
  27. <!-- 心心心 -->
  29.     <script>
  30.         document.write("<table border='1'>")
  31.         for (var i = 1; i <=9; i++) {
  32.             for (var j = 1; j<=i; j++) {
  33.                 document.write("*")
  34.                  //输出“列*行=结果”
  35.                     //    document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");
  36.             }
  37.             document.write("<br>")
  38.            
  39.         }
  40.     </script>
  42. </body>
  44. </html>

案例十三 理解行 与单元格

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=0009E265.png, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     table {
  12.         background-color: rgb(9, 231, 39);
  13.     }
  15.     td {
  16.         height: 100px;
  17.         width: 200px;
  18.         background-color: cornsilk;
  19.     }
  21.     td:hover {
  22.         background-color: rgb(24, 24, 24);
  23.         height: 50px;
  24.         width: 40px;
  25.         color: red;
  26.     }
  28.     h1 {
  29.         font-size: 100px;
  30.         background-color: red;
  31.     }
  32. </style>
  34. <body>
  35.     <!-- 打印表格一到一百的内容 -->
  36.     <script>
  37.         // 弹出表格信息
  38.         document.write("<table align='center' border=1>");
  39.         // 打印的排数 打印的是tr
  40.         for (var i = 1; i <= 6; i++) {
  41.             document.write("<tr height=70>");
  42.             // 打印的是td
  43.             // for (var j = 1; j <= 11; j++) {
  44.             //输出
  45.             document.write("<td align='center'>" + "编号" + i + "</td>");
  46.         }
  47.         // 输出排号 座位号
  48.         document.write("</tr>")
  49.         // }
  50.         document.write("</table");
  51.     </script>
  53.     <h1>理解行</h1>
  55.     <script>
  56.         // 弹出表格信息
  57.         document.write("<table align='center' border=1>");
  58.         // 打印的排数 打印的是tr
  59.         // for (var i = 1; i <= 10; i++) {
  60.         document.write("<tr height=70>");
  61.         // 打印的是td
  62.         for (var j = 1; j <= 6; j++) {
  63.             //输出
  64.             document.write("<td align='center'>" + "编号" + i + "</td>");
  65.         }
  66.         // 输出排号 座位号
  67.         document.write("</tr>")
  68.         // }
  69.         document.write("</table");
  70.     </script>
  71.     <h1>理解解单元格</h1>
  73.     <!-- 理解表格 -->
  74.     <!-- 打印表格一到一百的内容 -->
  75.     <script>
  76.         // 弹出表格信息
  77.         document.write("<table align='center' border=1>");
  78.         // 打印的排数 打印的是tr
  79.         for (var i = 1; i <= 6; i++) {
  80.             document.write("<tr height=70>");
  81.             // 打印的是td
  82.             for (var j = 1; j <= 6; j++) {
  83.                 //输出
  84.                 document.write("<td align='center';>" + "编号" + i + "</td>");
  85.             }
  86.             // 输出排号 座位号
  87.             document.write("</tr>")
  88.         }
  89.         document.write("</table");
  90.     </script>
  92.     <!-- 理解如何插入图片 -->
  93.     <!-- 理解表格 -->
  94.     <!-- 打印表格一到一百的内容 -->
  95.     <script>
  96.         // 弹出表格信息
  97.         document.write("<table align='center' border=1>");
  98.         // 打印的排数 打印的是tr
  99.         for (var i = 1; i <= 6; i++) {
  100.             document.write("<tr height=70>");
  101.             // 打印的是td
  102.             for (var j = 1; j <= 6; j++) {
  103.                 //输出
  104.                 // 打印出图片
  105.                 document.write("<td align='center';>" +"<img src='../for/img/download.png'>"+"</td>");
  106.             }
  107.             // 输出排号 座位号
  108.             document.write("</tr>")
  109.         }
  110.         document.write("</table");
  111.     </script>
  113. </body>
  115. </html>

案例十四 整除 10 23 45 67 89 四个数 用之前所讲 的if if else do while for

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <script>
  13.         // <!-- 3. 输入一个数，判断它是否能被3、5、9整除，注意考虑同时整除的情况 -->
  14.         var num = prompt("请用户输入要输入的数字<br>");
  15.         if (num % 3 === 0 && num % 5 && num % 9) {
  16.             document.write("输入的数字能被3 5 9 整除整除<br>")
  17.         } 
  18.         if (num % 3 == 0 && num % 5 == 0) {
  19.             document.write("输入的数字能被3 5整除<br>")
  20.         }
  21.         if (num % 5 == 0 && num % 9 == 0) {
  22.             document.write("输入的数字能被 5 9整除<br>")
  23.         }
  24.         if (num % 3 == 0 && num % 9 == 0) {
  25.             document.write("输入的数字能被 3 9整除<br>")
  26.         }
  28.         if (num % 3 === 0 || num % 5 == 0 || num % 9 == 0) {
  29.             document.write("输入的数字能被3 5 9 中的一个数整除<br>")
  30.         }
  31.         if (num % 3 === 0) {
  32.             document.write("输入的数字能被3整除<br>")
  33.         }
  34.         if (num % 5 === 0) {
  35.             document.write("输入的数字能被5整除<br>")
  36.         }
  37.         if (num % 7 === 0) {
  38.             document.write("输入的数字能被9整除<br>")
  39.         }
  41.         
  42.     </script>
  44.     <script>
  45.         
  46.     </script>
  47. </body>
  49. </html>

案例十五6个数，求出其中的最大值，最小值

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     *{
  12.         font-size: 40px;
  13.         color: red;
  14.     }
  15. </style>
  16. <body>
  17.       <!-- ! 定义6个数，求出其中的最大值，最小值 -->
  18. <script>
  20. var arr = [5, 8, 3, 4, 90,67];
  21. function find() {
  22.     var max = arr[0],
  23.      min = arr[0];
  24.     var maxindex = 0;
  25.     var minindex = 0;
  26.     for (var i = 0; i < arr.length; i++) {
  27.         if (arr[i] > max) {
  28.             max = arr[i];
  29.             maxindex = i;
  30.         } else if (arr[i] < min) {
  31.             min = arr[i];
  32.             minindex = i;
  33.         } 
  34.     }
  35.     document.write("最大值为：" + max + "位置为：" + maxindex);
  36.     document.write("最小值为：" + min + "位置为：" + minindex);
  37. }
  39. </script>
  40. <input type="submit" value="用户单机这里的信息求出其中的最大值，最小值 " onclick="find()">
  42. <script>
  43.     var n1=23,n2=90,n3=78,n4=34,n5=23,n6=90
  44.     var max=n1
  45.     if(max<n2)max=n2
  46.     if(max<n3)max=n3
  47.     if(max<n4)max=n4
  48.     if(max<n5)max=n5
  49.     if(max<n6)max=n6
  50. </script>
  51. </body>
  53. </html>

标签： html 前端
本文转载自: https://blog.csdn.net/qq_56248592/article/details/127379325
版权归原作者 星辰镜 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JS(第八课)循环语句中常用到的案例”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？