JavaScript循环语句

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量306 收藏 7
点赞数 9
分类专栏： CSS3 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42535142/article/details/135375088
版权

目录

 

一、认识循环​

二、while循环​

 三、while循环的练习​

四、do..while循环​

五、for循环​

六、for循环的练习​

七、for循环的嵌套​

八、循环控制​

九、猜数字游戏​

 

一、认识循环
c33865d5f4e749dc86859b571a5c4609.png

<!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>

    // while () {
    //   console.log("Hello World")
    // }

  </script>

</body>
</html>

二、while循环
702b4b73dfa7461f82fee1852285e802.png

<!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>

    // 死循环
    while (true) {
      console.log("Hello World")
      console.log("Hello Coderwhy")
    }

  </script>

</body>
</html>

 三、while循环的练习
dc5c458ab6d84e92b3c4bab2dc98c394.png

<!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>
    // 1.练习一: 打印10次Hello World
    // var count = 0
    // while (count < 10) {
    //   console.log("Hello World:", count)
    //   count++ // 10
    // }

    // 2.练习二: 打印0~99的数字
    // var count = 0
    // while (count < 100) {
    //   console.log(count)
    //   count++
    // }

    // 3.练习三: 计算0~99的数字和
    // var count = 0
    // var totalCount = 0
    // while (count < 100) {
    //   totalCount += count
    //   count++
    // }
    // console.log("totalCount:", totalCount)

    // 4.练习四: 计算0~99的奇数和
    // 如何判断一个数字是奇数还是偶数
    // var num = 120
    // if (num % 2 !== 0) { // 奇数
    //   console.log("num是一个奇数")
    // }
    // var count = 0
    // var totalCount = 0
    // while (count < 100) {
    //   if (count % 2 !== 0) {
    //     totalCount += count
    //   }
    //   count++
    // }

    // console.log("所有的奇数和:", totalCount)


    // 5.练习五: 计算0~99的偶数和
    var count = 0
    var totalCount = 0
    while (count < 100) {
      if (count % 2 === 0) {
        totalCount += count
      }
      count++
    }

    console.log("所有的偶数和:", totalCount)

    // 算法优化
    var count = 0
    var totalCount = 0
    while (count < 100) {
      totalCount += count
      count += 2
    }

    console.log("所有的偶数和:", totalCount)

  </script>

</body>
</html>

四、do..while循环
8f50174aaa364fe4a1939aeec58b6bd1.png

<!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>

    // do..while语法结构
    // do {

    // } while (条件)

    // 练习一: 打印10次Hello World
    var count = 0
    do {
      console.log("Hello World")
      count++
    } while (count < 10)

    // 练习二: 计算0~99的数字和
    var count = 0
    var totalCount = 0
    do {
      totalCount += count
      count++
    } while (count < 100)
    console.log("totalCount:", totalCount)

  </script>

</body>
</html>

五、for循环
5a0cedc946534f38acab3abceb470095.png

<!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>

    /*
      1.首先, 会先执行var count = 0;
      2.根据条件执行代码
        * count < 3
        * alert(count) // 0 1 2
        * count++
    */
    for (var count = 0; count < 3; count++) {
      alert(count)
    }
    

  </script>

</body>
</html>

六、for循环的练习
78b32c9d72a14d9bab095fe993c6dccc.png

<!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>

    // 1.打印10次Hello World
    // for (var i = 0; i < 10; i++) {
    //   console.log("Hello World")
    // }

    // 2.打印0~99的数字
    for (var i = 0; i < 100; i++) {
      console.log(i)
    }

    // 3.0~99的数字和
    var totalCount = 0
    for (var i = 0; i < 100; i++) {
      totalCount += i
    }
    console.log("totalCount:", totalCount)

    // 4.0~99的奇数和
    var totalCount = 0
    for (var i = 0; i < 100; i++) {
      if (i % 2 !== 0) {
        totalCount += i
      }
    }
    console.log("totalCount:", totalCount)

    // 算法优化
    var totalCount = 0
    for (var i = 1; i < 100; i+=2) {
      totalCount += i
    }
    console.log("totalCount:", totalCount)
    
    

  </script>

</body>
</html>

七、for循环的嵌套
5c8e47a90acb4f3fb8c5345f93581302.png

<!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循环的嵌套: 循环中执行体, 里面又嵌套了循环
    for (var i = 0; i < 10; i++) {

      console.log("i开始执行:", i)

      for (var j = 0; j < 3; j++) {
        console.log("执行j循环")
      }

      console.log("i结束执行:", i)
    }

  </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 {
      color: red;
    }
  </style>
</head>
<body>
  <script>

    // 在屏幕上显示一个❤
    // document.write("❤")

    // 案例一: 
    for (var i = 0; i < 9; i++) {
      document.write("<div>")
      
      for (var m = 0; m < 10; m++) {
        document.write("❤ ")
      }

      document.write("</div>")
    }

  </script>

</body>
</html>

30e058dd38734ed89730633ecc50d2f7.png

<!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 < 6; i++) {
      document.write("<div>")
      
      for (var m = 0; m < i+1; m++) {
        document.write("❤ ")
      }

      document.write("</div>")
    }

  </script>

</body>
</html>

862544d2291f4d5d9c66d62607209859.png

<!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 < 9; i++) {
      document.write("<div>")
      
      for (var m = 0; m < i+1; m++) {
        var a = m + 1
        var b = i + 1
        var result = (m+1)*(i+1)
        // document.write(`${a}*${b}=${result} `)
        document.write(a + "*" + b + "=" + result + " ")
      }

      document.write("</div>")
    }

  </script>

</body>
</html>

7561d8f8898642d4b22df1f67540f726.png

<!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>

    table {
      border-collapse: collapse;
    }

    td {
      padding: 8px 16px;
      border: 1px solid orange;
      color: red;
    }

  </style>
</head>
<body>
  
  <script>
    
    document.write("<table>")

    for (var i = 0; i < 9; i++) {
      document.write("<tr>")
      
      for (var m = 0; m < i+1; m++) {
        var a = m + 1
        var b = i + 1
        var result = (m+1)*(i+1)
        document.write(`<td>${a}*${b}=${result}</td>`)
      }

      document.write("</tr>")
    }

    document.write("</table>")
  </script>

</body>
</html>

653a40888a9e46bba776a9dfa9f5cfaf.png

八、循环控制
68605aca209749eebe113bd89b4dc292.png

<!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 names = ["abc", "cba", "nba", "mba", "bba", "aaa", "bbb"]
    
    // 循环遍历数组
    // break关键字的使用
    // 需求: 遇到nba时, 不再执行后续的迭代
    // for (var i = 0; i < 4; i++) {
    //   console.log(names[i])
    //   if (names[i] === "nba") {
    //     break
    //   }
    // }

    // continue关键字的使用: 立刻结束本次循环, 执行下一次循环(step)
    // 需求: 不打印nba
    for (var i = 0; i < 7; i++) {
      if (names[i] === "nba" || names[i] === "cba") {
        continue
      }
      console.log(names[i])
    }


  </script>

</body>
</html>

8d3941ee6c4b4fea992a60331aabc476.png

 

九、猜数字游戏
7e97edf77c2e497792c7488e00cca6cc.png

<!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>

    // Math.random(): [0, 1)
    for (var i = 0; i < 1000; i++) {
      var randomNum = Math.random() * 100 // 99
      randomNum = Math.floor(randomNum)
      console.log(randomNum)
    }

    // 生成一个0~99的随机数
    var randomNum = Math.floor(Math.random() * 100)

  </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>

    // 1.随机生成一个0~99的数字
    var randomNum = Math.floor(Math.random() * 100)
    alert(randomNum)

    // 2.玩家有7次机会猜测数字
    var isSuccess = false
    var count = 3
    for (var i = 0; i < count; i++) {
      // 获取用户的输入
      var inputNum = Number(prompt("请输入您猜测的数字:"))

      // 和randomNum进行比较
      if (inputNum === randomNum) {
        alert("恭喜您, 猜对了")
        isSuccess = true
        break
      } else if (inputNum > randomNum) {
        alert("您猜大了")
      } else {
        alert("您猜小了")
      }

      if (i === count - 1) {
        alert("您的次数已经用完了")
      }
    }

    // if (!isSuccess) {
    //   alert("您的机会用完了~")
    // }

  </script>

</body>
</html>

 

 

小袁儿
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript循环语句（一）
张恒华的博客
03-18 6046
for语句 语法： for(语句1;语句2;语句3;){ 被执行的代码块 } // 语句1：在循环（代码块）开始前执行 // 语句2：定义运行循环（代码块）的条件 // 语句3：在循环（代码块）已被执行之后执行 编程练习 小伙伴们，根据效果图，用循环写出代码。 任务 先写出初始的变量值i=1 写出它执行循环的条件i<=9 每循环一次后变量值的增加i++ 输出内容到页面中，注...
WEB基础之：JavaScript循环语句
f_carey的博客
01-10 599
JavaScript循环语句1. for 循环2. 使用break退出循环3. 使用continue跳过迭代4. while语句和do ... while语句 1. for 循环 for (initializer; exit-condition; final-expression) { // code to run } 2. 使用break退出循环 使用break语句在所有迭代完成之前退出循环; 当switch语句中符合输入表达式的情况满足时，break语句立即退出switch语句并移动到代码之后。
JavaScript 循环语句
L_ABCyl的博客
11-11 1053
循环语句；while 循环语句；for 循环语句；do...while 循环语句；break 语句；continue；tag。写一个计算银行利息的程序；输出100以内的质数；输出*星号；输出*号金字塔形状；带编号的表格,打印出html标签；九九乘法表
JavaScript循环语句的练习题
qq_42052478的博客
03-22 2441
js循环语句练习题
Javascript常见循环语句
nbzyq的博客
06-27 1576
目录一、while循环二、do…while循环 三、 for循环while语法：while (条件){代码(循环体)};注：(1)、只有当条件为true时，才能执行循环体。如果条件为false，循环有可能永远不被执行。(2)、先执行条件，再执行循环体。(3)、循环一次称之为一次迭代，循环几次称之为几次迭代。上面的例子中，当年i循环到5时，不满足条件，循环结束；do ...while语法：do{//循环代码}while(条件)；注：(1)、始终是先执行循环体，在检查条件是否满足。(2)、无论条件是true还是
Javascript循环语句
爱是与世界平行
06-07 942
循环语句循环语句的作用是反复地执行同一段代码，尽管其分为几种不同的类型，但基本的原理几乎都是一样，只要给定的条件能得到满足，包括在循环条件语句里面的代码就会重复执行下去，一旦条件不再满足则终止。while语句while(表达式) { 语句； };while为不确定性循环，当表达式的结果为真时，执行循环中的语句，表达式为假时不执行循环。do…while语句do {
javascript循环语句笔记
m0_62284513的博客
08-21 240
js中的循环语句
前端开发面试题—JavaScript循环语句
黛琳ghz的博客，期待你的关注。
08-24 540
在程序中，一组被重复执行的语句称为循环体，能否重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句称为循环语句。 我们在理解条件语句的时候，我们可以想象JavaScript解释器在源代码中会经过不同的路径，而循环语句则是把这些路径弯曲又回到起点，以重复执行代码中的某些部分。在JavaScript中有五种循环语句：for语句、while语句、do/while语句、for/of语句（及其变体for/await语句）和for/in语句。
JavaScript的循环语句
小小鱼儿小小林的博客
09-26 624
01)for语句 for循环是一种前测试循环语句，但它具有在执行循环之前初始化变量和定义循环后要执行的代码的能力。以下是for循环的语法：         初始化表达式，控制表达式，循环后表达式 for(initialization;expression;post-loop-expression){ //loop option } 例如: var sum = 0; for(var ...
高性能JavaScript循环语句和条件语句
10-22
主要为大家介绍了高性能JavaScript循环语句和条件语句，感兴趣的小伙伴们可以参考一下
javascript 循环语句 while、do-while、for-in、for用法区别
10-28
本文章介绍了在学习javascript中的循环语句的用法，包while、do-while、for-in、for它们之间的区别，也是常用的循环语句了，有需要的朋友可以了解一下
详解JavaScript中循环控制语句的用法
10-24
在JavaScript编程语言中，循环控制语句是编程中不可或缺的一部分，它们允许我们更灵活地处理循环结构。本文将深入探讨两种关键的循环控制语句：`break` 和 `continue`，以及它们在不同循环类型中的应用。 首先，...
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1308
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 208
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 274
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 1033
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
JS混淆基本类型和原理
朴拙科技的博客
07-06 401
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
Vue 数据大屏适配
FitnessSnail的博客
07-02 267
不会因为在某一维度上缩放过大而导致元素在另一维度上超出视口。.dataScreen-content 盒子内容根据设计稿给的。（默认为 1920x1080）计算缩放比例，并。的缩放比例，那么元素可能会在某一维度上。，这在很多情况下是不希望发生的。的缩放比例的目的是为了保证。单位进行正常的布局就行。在水平和垂直方向上都。
javascript循环语句
06-09
JavaScript中的循环语句有以下几种： 1. for循环： ```javascript for (var i = 0; i ; i++) { console.log(i); } ``` 2. while循环： ```javascript var i = 0; while (i ) { console.log(i); i++; } ``` 3...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值