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

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

2023-07-16 70
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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循环语句
JavaScript循环语句案例
t75yjb52rsccc
目录
相关文章
六卿
|
2月前
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句，包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性，并通过示例代码展示了它们的用法和区别。
六卿
43 6
JS循环for、for...of、for...in
尹正杰
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识，并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
尹正杰
50 2
JavaScript基础知识-流程控制之while循环
Li370234940
|
1月前
|
JavaScript 前端开发
js循环有几种
js循环有几种
Li370234940
31 0
小白学大数据
|
3月前
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
小白学大数据
295 2
阿福的工作室
|
3月前
|
JavaScript 前端开发
JavaScript中有哪几种循环？他们的运用场景在哪？
JavaScript中有哪几种循环？他们的运用场景在哪？
阿福的工作室
38 1
乐多_L
|
3月前
|
JavaScript 前端开发 索引
js的循环中foreach、for in和for of的区别
js的循环中foreach、for in和for of的区别
乐多_L
144 0
疯狂的猿
|
13天前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画，js循环动画，简单的画面设计。非常丝滑有意思，欢迎对此代码感兴趣的朋友前来下载参考。
疯狂的猿
25 2
六卿
|
2月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句，包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
六卿
54 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
游客j4mujezz7vm7y
|
2月前
|
JavaScript 前端开发 索引
js循环
js循环
游客j4mujezz7vm7y
56 1
尹正杰
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-forEach循环
关于JavaScript基础知识中forEach循环的介绍。
尹正杰
45 1
JavaScript基础知识-forEach循环

热门文章

最新文章

  • 1
    实时显示日期、时间、城市天气（HTML+JS）
  • 2
    JavaScript值得注意的小知识点
  • 3
    HTML6 无 JavaScript 的单页应用引起一片哗然
  • 4
    走在JS上的全栈之路(一)
  • 5
    JavaScript 图片切割效果
  • 6
    js: 删除node的所有child
  • 7
    js正则表达式语法
  • 8
    Swift WKWebView JS 和 Native 交互(上)
  • 9
    开发者最容易犯的13个JavaScript错误
  • 10
    高性能Javascript--脚本的无阻塞加载策略
  • 1
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 2
    《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
    271
  • 3
    js【详解】arr.reduce() 数组缩减
    47
  • 4
    【vue】 vue2 | js 实现数字滚动效果
    107
  • 5
    【vue】 网站动态背景 | vanta.js的使用
    418
  • 6
    JavaScript进阶-JavaScript库与框架简介
    58
  • 7
    DVWA JavaScript 通关解析
    67
  • 8
    WEB三大主流框架之Vue.js
    45
  • 9
    断网之后的页面，Autox.js是点击还是上下滑动比较好？
    60
  • 10
    autox.js如何监听异常情况，比如网络中断、内存慢、应用死机或者页面无响应
    221

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战
  • Python语言基础 - 语法入门

    • 相关电子书

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

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云OSS设置跨域访问