备案控制台
开发者社区 开发与运维 文章 正文

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

2023-07-16 54
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JS(第八课)循环语句中常用到的案例(二)

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

   //  do...while都会进行一次循环 
   // 用户定义的变量为 i 初始值为 1
   var i=1;
   // 如果在下面的while(条件成立的话则走下面)do{中间的循环语句信息}
   do {
        document.write('<h1>请输出i的值' + i + '</h1><br>');
       i++
   } while (i <=1)
   // 如果上面的条件不成立打印输出下面的信息内容
    document.write('<h1>请输出结束i的值' + i + '</h1><br>');
   // 通过浏览器的循环条件你会发现内容 无论如何 do{}whiler()语句都会执行一次 比如上面的案例 打印出了
   // 1 2

 

for循环的执行顺序:

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

<!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>for循环语句</title>
</head>
<body>
    <script>
        // for循环的语句执行顺序
        // 用户声明变量的起点位置在哪里
        var i = 0;
        // for(第一个位置填循环的起点位置;第二个空填写循环的条件;第三个空填写变量是++ 还是--)
        for (i; i < 3; i++) {
            // 如果上面三个位值的条件都满足的话 那么执行下面的语句信息
            document.write('<h1>请输出i的值' + i + '</h1><br>');
        }
        // 如果条件不满足的话输出下面的语句
        document.write('<h1>请输出结束i的值' + i + '</h1><br>');
    </script>
</body>
</html>

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

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


请用户在控制台打印出自己的名字10次


请用户在浏览器打印出自己的名字100次


请用户在弹窗打印出自己的名字5次


请用户在浏览器中，控制台中打印出自己的0到一百的数字


请用户在浏览器中，控制台中打印出自己的0到一百的数字；并且将和求出来,求出0到100的平均数.


请用户在浏览器中，控制台中打印出自己的0到一百的数字；并且将和求出来,求出0到100的平均数.求出奇数和


请用户在浏览器中，控制台中打印出自己的0到一百的数字；并且将和求出来,求出0到100的平均数.求出偶数和


请用户在浏览器中，控制台中打印出自己的0到一百的数字；并且在控制台打印能被3 7 9整除的数字


请用户在浏览器中，控制台中打印出自己的0到一百的数字；并且在控制台打印能被5整除的数字

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

 

   游戏规则


   Math.floor(Math.random() * 50); 随机生成随机数

   电脑随机生成随机数 两个 数据 让用户猜出数字的范围 电脑随机生成1到50的数字信息

   如果用户两个数的和在50到100以内 则在控制台浏览器弹出框显示内容弹出你猜的数字正好在50到100之间

   如果用户在两个数的和在23到49以内 则控制台浏览器弹出框显示内容数字范围在两个数的和在23到49以内

   如果用户在两个数的和在100到1000以内 则控制台浏览器弹出框显示内容数字范围在两个数的和在100到1000内


   如果用户两个数的乘在1到100以内 则在控制台浏览器弹出框显示内容弹出你猜的数字正好在0到100之间

   如果用户在两个数乘在100到500以内 则控制台浏览器弹出框显示内容数字范围在两个数的和在100到500以内

   如果用户在两个数乘在501到1000以内 则控制台浏览器弹出框显示内容数字范围在两个数的和在

 

   如果用户两个数的相除在1到10以内 则在控制台浏览器弹出框显示内容弹出你猜的数字正好在1到10之间

   如果用户在两个数除在10到20以内 则控制台浏览器弹出框显示内容数字范围在两个数的和在10到20以内

   如果用户在两个数chu在21到30以内 则控制台浏览器弹出框显示内容数字范围在两个数的和在21到30内


   else 弹出内容输入有误

<!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>猜数字游泳</title>
</head>
<body>
    <script>
        // 利用对象生成第一个数
        var math1 = Math.floor(Math.random() * 50);
        var math2 = Math.floor(Math.random() * 50);
        // 方法一 定义第三变量
        var m = math1 + math2;
        var n = math1 * math2;
        var k = math1 / math2;
        var o = math2 / math1
        // if 语句
        if (m >= 50 && m < 100) {
            document.write("");
            console.log("");
            alert("");
        }
        if (m > 23 && m <= 49) {
            document.write("")
            console.log("");
            alert("");
        }
        if (m > 100 && m <= 1000) {
            document.write("")
            console.log("");
            alert("");
        }
        // 方法二  if else 循环
        if (n >= 50 && n < 100) {
            document.write("");
            console.log("");
            alert("");
        }
        else
            if (n > 23 && n <= 49) {
                document.write("")
                console.log("");
                alert("");
            }
            else
                if (n > 100 && n <= 1000) {
                    document.write("")
                    console.log("");
                    alert("");
                }
        // var o = math2 / math1
        // 如果math1>math2 则去出var k = math1 / math2;
        if (math1 > math2) {
            if (k > 1 && k < 10 || k > 10 && k < 20 || k > 21 && k < 30) {
                document.write("则在控制台浏览器弹出框显示内容弹出随机数数" + math1 + "到" + math2)
                console.log("则在控制台浏览器弹出框显示内容弹出随机数数" + math1 + "到" + math2);
                alert("则在控制台浏览器弹出框显示内容弹出随机数数" + math1 + "到" + math2);
            } else {
                alert("内容不存在")
            }
        } else {
            // var o = math2 / math1
            if (o > 1 && o < 10 || o > 10 && o < 20 || o > 21 && o < 30) {
                document.write("则在控制台浏览器弹出框显示内容弹出随机数数" + math2 + "到" + math1)
                console.log("则在控制台浏览器弹出框显示内容弹出随机数数" + math2 + "到" + math1);
                alert("则在控制台浏览器弹出框显示内容弹出随机数数" + math2 + "到" + math1);
            } else {
                alert("内容不存在")
            }
        }
        alert(math1);
        alert(math2);
        document.write(math1);
        document.write(math2)
        console.log(math1);
        console.log(math2)
    </script>
</body>
</html>

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

 

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

 <!-- !生成随机数一到100内 -->
 <script>
     // 利用对象生成第一个数
     var num1 = Math.floor(Math.random() * 100);
     console.log(num1);
     // 第二步让用户输入第二个数
     // 判断了七次
     var num2 = 1;
     for (num2; num2 <= 10; num2++) {
         // 判断程序是否有问题
         debugger
         // confirm("开始进行猜数字")
         confirm("开始执行数据")
         var num3 = prompt("请用户输入1到100之间的数字");
         if (num1 == num3) {
             alert("猜对了")
             break
         } else if (num1 < num3) {
             alert("猜大了")
         } else if (num1 > num3) {
             alert("猜小了")
         } else if (num2 > 7) {
             alert("次数用完了" + num1)
         }
         //    这是用户的次数
         console.log(num2);
         // 这是接收用户的数字
         console.log(num3)
         continue;
     }
 </script>

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

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

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>猜数游戏</title>
    <script type="text/javascript">
      var num = Math.floor(Math.random() * 100 + 1);
      var num = Math.floor(Math.random() * 100 + 1);
      do {
        var guess = parseInt(prompt("下面进行猜数游戏\n请输入1-100之间的整数：", ""));
        var he = parseInt(prompt("下面进行猜数游戏\n请输入1-100之间的整数：", ""));  
        if (guess == num, he == num) {
          alert("^_^ ,恭喜你，猜对了，幸运数字是：" + num);
          break;
        } else {
          if (guess > num, he > num) {
            alert("^_^ ,你猜的数字大了");
            go_on = confirm("是否继续游戏？");
          } else {
            alert("^_^ ,你猜的数字小了");
            go_on = confirm("是否继续游戏？");
          }
        }
      } while (go_on);
      alert("谢谢参与游戏！");
    </script>
  </head>
  <body>
  </body>
 </html>

案例四 水仙花数

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

ge*ge*ge+shi*shi*shi+bai*bai*bai==tyu 

<!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>
        var tyu = prompt("请输入三位的数值");
            ge = tyu % 10,
            shi = parseInt(tyu / 10) % 10,
            bai = parseInt(tyu / 100) % 100,
        console.log("输入个位数值" + ge);
        console.log("输入十位数值" + shi);
        console.log("输入百位数值" + bai);
        if(ge*ge*ge+shi*shi*shi+bai*bai*bai==tyu){
            alert("个位的值为"+ge);
            alert("十位的值为"+shi);
            alert("百位的值为"+bai);
            document.write("输出水仙花束的值为"+tyu)
        } else{
            document.write("输出不是水仙花束的值为"+tyu)
        }
    </script>
</body>
</html>

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

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

<!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>
    <!-- 第一排 6 第三排 9号 以完 -->
    <script>
        // 弹出表格信息
        document.write("<table align='center' border=3>");
        // 打印的排数 打印的是tr
        for (var i = 1; i <= 10; i++) {
            document.write("<tr height=70>");
            // 打印的是td
            for (var j = 1; j <= 10; j++) {
                if (i == 1 && j == 6) {
                    document.write("<td align='center' width=80 background=yes.png>以收礼</td>");
                    continue;
                }
                if (i == 3 && j == 9) {
                    document.write("<td align='center' width=80 background=yes.png>以收礼</td>");
                    continue;
                }
                //输出
                document.write("<td align='center' width=80 background=no.png>" + i + "排" + j + "座" + "</td>");
            }
            // 输出排号 座位号
            document.write("</tr>")
        }
        document.write("</table");
    </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>
        // 行数
        // for (var i = 0; i < 10; i++) {
            个数
            // for (var k = 0; k < 34; k++) {
                // document.write("*")
            // }
            // document.write("<br>")
        // }
    </script>
<!-- 心 -->
<!-- 心心 -->
<!-- 心心心 -->
    <script>
        //  <!-- 九九乘法表 -->
        document.write("<table border='1'>")
        for (var i = 1; i <=9; i++) {
            for (var j = 1; j<=i; j++) {
                // document.write("*")
                 //输出“列*行=结果”
                       document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");
            }
            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=0009E265.png, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
        background-color: rgb(9, 231, 39);
    }
    td {
        height: 100px;
        width: 200px;
        background-color: cornsilk;
    }
    td:hover {
        background-color: rgb(24, 24, 24);
        height: 50px;
        width: 40px;
        color: red;
    }
    h1 {
        font-size: 100px;
        background-color: red;
    }
</style>
<body>
    <!-- 打印表格一到一百的内容 -->
    <script>
        // 弹出表格信息
        document.write("<table align='center' border=1>");
        // 打印的排数 打印的是tr
        for (var i = 1; i <= 6; i++) {
            document.write("<tr height=70>");
            // 打印的是td
            // for (var j = 1; j <= 11; j++) {
            //输出
            document.write("<td align='center'>" + "编号" + i + "</td>");
        }
        // 输出排号 座位号
        document.write("</tr>")
        // }
        document.write("</table");
    </script>
    <h1>理解行</h1>
    <script>
        // 弹出表格信息
        document.write("<table align='center' border=1>");
        // 打印的排数 打印的是tr
        // for (var i = 1; i <= 10; i++) {
        document.write("<tr height=70>");
        // 打印的是td
        for (var j = 1; j <= 6; j++) {
            //输出
            document.write("<td align='center'>" + "编号" + i + "</td>");
        }
        // 输出排号 座位号
        document.write("</tr>")
        // }
        document.write("</table");
    </script>
    <h1>理解解单元格</h1>
    <!-- 理解表格 -->
    <!-- 打印表格一到一百的内容 -->
    <script>
        // 弹出表格信息
        document.write("<table align='center' border=1>");
        // 打印的排数 打印的是tr
        for (var i = 1; i <= 6; i++) {
            document.write("<tr height=70>");
            // 打印的是td
            for (var j = 1; j <= 6; j++) {
                //输出
                document.write("<td align='center';>" + "编号" + i + "</td>");
            }
            // 输出排号 座位号
            document.write("</tr>")
        }
        document.write("</table");
    </script>
    <!-- 理解如何插入图片 -->
    <!-- 理解表格 -->
    <!-- 打印表格一到一百的内容 -->
    <script>
        // 弹出表格信息
        document.write("<table align='center' border=1>");
        // 打印的排数 打印的是tr
        for (var i = 1; i <= 6; i++) {
            document.write("<tr height=70>");
            // 打印的是td
            for (var j = 1; j <= 6; j++) {
                //输出
                // 打印出图片
                document.write("<td align='center';>" +"<img src='../for/img/download.png'>"+"</td>");
            }
            // 输出排号 座位号
            document.write("</tr>")
        }
        document.write("</table");
    </script>
</body>
</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


 <script>
     var i = 1, sum = 0;
     while (i <= 100) {
         sum += i;
         i++;
         document.write("一百的和为" + sum + "<br>");
     }
     var a = 1, sum1 = 0;
     while (a <= 100) {
         // if(num%2>0){
         // }
         sum1 += a;
         a += 2;
         document.write("一百的奇数为" + sum1 + "<br>");
     }
     console.log(sum1)
 </script>
ody>

上面是方案一

文章标签：
JavaScript
关键词：
JavaScript案例
JavaScript循环语句
JavaScript循环语句案例
t75yjb52rsccc
目录
相关文章
众所周知
|
3天前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域，全局变量在所有地方可访问，局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型，如字符串、数字、布尔值，可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`，将字符串转为数值。
众所周知
18 1
穆雄雄.
|
3天前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——ccv.js
纯js实现人脸识别眨眨眼张张嘴案例——ccv.js
穆雄雄.
57 0
穆雄雄.
|
3天前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——alive_face.js
纯js实现人脸识别眨眨眼张张嘴案例——alive_face.js
穆雄雄.
26 0
傻啦嘿哟
|
3天前
|
编解码 JavaScript 安全
JS逆向过程中中文编解码的小案例详解
JS逆向过程中中文编解码的小案例详解
傻啦嘿哟
11 1
程序员-刘华强
|
3天前
|
JavaScript 前端开发
JavaScript 条件循环语句（for 循环）
JavaScript 条件循环语句（for 循环）
程序员-刘华强
18 1
众所周知
|
3天前
|
JavaScript 前端开发
js的let、const、var的区别以及应用案例
【4月更文挑战第27天】ES6 中，`let` 和 `const` 是新增的变量声明关键字，与 `var` 存在显著差异。`let` 允许重新赋值，而 `const` 不可，且两者都具有块级作用域。`var` 拥有函数级作用域，并可在函数内任意位置访问。`let` 和 `const` 声明时必须初始化，而 `var` 不需。根据需求选择使用：局部作用域用 `let`/`const`，全局或函数范围用 `var`，不可变值用 `const`。
众所周知
24 2
快乐阿超
|
3天前
android-agent-web中js-bridge案例
android-agent-web中js-bridge案例
快乐阿超
22 2
源码世界
|
3天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构：Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言：C# 6.0、JavaScript 前端框架：JQuery、EasyUI、Bootstrap 后端框架：MVC、SQLSugar等 数 据 库：SQLserver 2012
源码世界
23 0
穆雄雄.
|
3天前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
穆雄雄.
11 0
穆雄雄.
|
3天前
|
JavaScript 前端开发
JavaScript操作BOM简单案例
JavaScript操作BOM简单案例
穆雄雄.
9 1

热门文章

最新文章

  • 1
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 4
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（七）(1)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 8
    【专栏】Vue.js和Node.js如何结合构建现代Web应用
  • 9
    JavaScript 权威指南第七版（GPT 重译）（一）(1)
  • 10
    JavaScript 权威指南第七版（GPT 重译）（五）(2)
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    147
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    18
  • 3
    描述 JavaScript 中的垃圾回收机制。
    23
  • 4
    如何使用 JavaScript 操作 DOM？
    20
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    22
  • 6
    JavaScript 中的数组方法有哪些？
    11
  • 7
    JS设置日期为0时0分0秒
    36
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    27
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    23
  • 10
    深入理解JavaScript中的闭包与作用域链
    10

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考