while循环和for循环

1.while循环

<script>
        while (循环条件) {
            要重复执行的代码(循环体)
        }
    </script>

1while循环

 <script>
        // 1.变量的值
        let i = 1
        // 2.循环条件 终止循环结束
        while (i <= 5) {
             //循环体
          console.log(`这代码会执行第${i} `);
        //   变量需要改变 结束循环的条件
          i++
        }
    </script>

2.while循环练习

<script>
        // 初始值
     let a = 1,
    //   让用户自己输入多少行
     i = prompt ('请输入几行')
    //  循环条件 满足条件 就执行
     while (a <= i) {
         document.write(`<p>月薪过万${a}</p>`)
        // 变量需要改变 结束循环的条件
         a++
     }
    </script>

3.while循环案例

<script>
        // 让用户 赋值
        let num = +prompt('请您输入数字'),
        i = 10,
        son = 0
        // 循环条件 满足条件 就执行
       while (i <= num) {
        //  循环体
        document.write(`${i}<br>`)
        // 修改变量 结束循环
        i++
       }
    </script>

4.案例1-100的总和

 <script>
        // 单独定义一个 变量 总和 som
        // som = 0
        // 循环的时候
        // sum = sum + i 

        let i = 1
        let sum = 0;
        while (i <= 100) {
            // 手法熟练后就可以这样子写了
            sum += i++
            //    分析 
            // sum += 1  // sum = sum + 1

            // sum = sum + i++
            // sum = sum + i 
            // i++
        }
        console.log('你要的偶数总和', sum);
    </script>

5.while循环计算1-100偶数总和

<script>
        // 1-100 偶数和
        // 2 + 4 + 6 + 8 + 10.。。。

        // 去判断当前是不是偶数 对2 取整 求余 没有余数

        // 2 % 2 = 0
        // 4 % 2 =0 
        // 5 % 2 =1

        // 原因
        // 1 偶数和奇数判断条件 对2 求余 是否等于 0
        // 2.if 条件来判断当前的i的是不是偶数
        // 是 去执行什么的样业务 计算总和 sum += i;

        let i = 1,
            sum = 0
        while (i <= 100) {
            // 这一行代码不能直接执行 满足某些条件才执行
            if (i % 2 === 0) {
                sum += i;
                // 无论当前的i是偶数还是奇数 i++都要执行 必须进行下一轮的循环
            }
            i++
        }
      console.log('你要的1-100的偶数和',sum);
    </script>

6.案例之流氓框的案例

  <script>
        // 1.定义 初始变量
        let str;
        // 2.判断的条件 (满足什么条件 就不会 执行循环)
        while (str !== '吃了') {
            // 弹窗
             str = prompt('说你吃饭了')
        }
        // 变量的初始值 变量判断循环条件 变量需要被修改
    </script>

7.简易ATM取款机-用户输入数字功能-执行对应的功能

1.先要找出 循环的 条件 以及 循环要做的事情
2.根据用户的输入来编写对应的分支结构
3.再在对应的分支结构中 一个一个的去实现业务的功能
  <script>
        /*   需求:
            1 打开页面的时候  弹出一个对话框 
              显示以下内容 
              1 取款
              2 存款
              3 查看余额
              4 退出 
            
            2 用户就需要输入一些信息 
              1 用户输入 “1”
                还会继续弹出窗口 又问一遍  以上 1 的内容 
              2 用户输入 “2”
                还会继续弹出窗口 又问一遍  以上 1 的内容 
              3 用户输入 “3”
                还会继续弹出窗口 又问一遍  以上 1 的内容 
              4 用户输入 “4” 结束了。。 */

        /* 分析:
        1 只要用户输入的 不是4 都弹窗 否则就不弹窗  (回顾 上午讲 爱我爱我 (只要用户输入的不是爱 就一直弹窗) */

        let input;
        // 定义一个 存款的金额
        money = 0;
        while (input !== 4) {
            input = +prompt(`
          1.存款
          2.取款
          3.查看余额
          4.退出
        `)
            // 开始对用户的输入做出判断
            if (input === 1) {
                let num1 = +prompt('请出入您要的存款数量')
                alert(`存款成功 卡剩余额为 ${money += num1}元`)
            } else if (input === 2) {
                let num2 = +prompt('请您输入你要的取款数量')
                alert(`取款成功: ${money -= num2}卡剩余额为${money}元`)
            } else if (input === 3) {
                alert(money)
            } else if (input === 4) {
                alert('退出成功,感谢你下次光临')
            }
            else {
                alert('您好:您输入数据有误,请您重新输入')
            }
        }

    </script>

8.数量修改

 <script>
        let money =10;
    //    document.write (money = money + 10);//加10
    //    document.write (money += 10);//加10

       document .write(money = money - 0)
       document .write(money -=  0)

    </script>

2.for循环

<script>
        for (声明纪录循环次数的变量; 循环条件; 变量值) {
            循环体
        }
        for (let i = 1; i <= 100; i++) {
            console.log(i);
            
        }
    </script>

1.for循环初体验

<script>
     /*  1 先执行 let i = 1;
      2 再去执行 i<=100的判断
      3 执行 console.log(i)
      4 再去执行 i++;
      5 去执行判断 i<=100 
      6 又去执行 console.log(i)
      7 再去执行  i++
      8 又去执行 i<=100
      9 又去执行 console.log(i)
      10 i++  */
        for (let i = 1; i < 100; i++) {
            document.write(`${i}  <br>`)
        }
    </script>

2.求1-100之间所有的偶数

<script>
        let sum = 0
        for (let i = 1; i <= 100; i++) {
            // 左边满足条件了等于 true 才去执行右边的              代码
            (i % 2 === 0) && (sum += i);
        }
        console.log(sum)

3.用for循环做出五百个星星

<script>
        let star = '';
        for (let i = 0; i < 500; i++) {
            star += 'xingxing';
        }
        console.log(`${star}`);
    </script>

4.案例三天背五个单词

 <script>
        // 执行背多少天
        for (let i = 1; i <= 3; i++) {
            document.write(`第${i}天<br> `)

            //执行一天要背多少个单词
            for (let b = 1; b < 5; b++) {
                document.write(`背了${b}个单词<br>`)
            }
        }
    </script>

5.N天背N个单词

<script>
        // 用户输入
        let num1 = +prompt('请输入天数'),
            num2 = +prompt('请输入背单词的个数')
        //   执行要背多少天
        for (let index = 1; index <= num1; index++) {
            document.write(`第${index}天<br>`)
        //   执行要背多少个单词
            for (let index = 1; index <= num2; index++) {
                document.write(`背了${index}单词<br>`)
            }
        }</script>

6.continue和break

   <script>
        /*
  
        for
        控制循环结束
        1 continue 跳过本次循环 继续开启下次循环 (不是必须)
          continue 想要跳过这个循环 不一定通过它
           我们自己 if else 也能实现类似的功能
        2 break 直接 循环结束 不玩了
          也不是必须 , 我们也是可以通过  if-else 来实现它的功能 
          但是如果可以 使用break的话 尽量使用它 (性能更加好) 因为break会终止剩下的循环
  
  
        如果当前的index 是一个奇数  下面的代码就不要再运行了 开启下一个循环
        */

        // 只显示 奇数 单数
        // for (let index = 1; index <= 10; index++) {
        //   // 判断当前的index是不是奇数
        //   if (index % 2 !== 0) {
        //     // console.log(index);

        //     continue;
        //   }

        //   console.log(index,"⭐");
        // }
        // 只显示 奇数 单数
        // for (let index = 1; index <= 10; index++) {
        //   // 判断当前的index是不是奇数
        //   if (index % 2 !== 0) {
        //     // 奇数
        //   }else{
        //     // 偶数
        //     console.log(index,"⭐");
        //   }

        // }

        /*
        continute 功能 其实 也是可以通过 if else 来模拟和实现
          if else  根据条件来执行某段代码
  
          continute 跳过循环(不想执行某段代码)
         */

        // 只输出偶数
        // for (let index = 1; index <= 10; index++) {
        //   if (index % 2 === 0) {
        //     // 是偶数了才输出
        //     console.log(index);
        //   }
        // }

        // for (let index = 1; index <= 10; index++) {

        //   if (index % 2 !== 0) {
        //     // 是奇数的话  就跳过这次循环
        //     continue
        //   }
        //   console.log(index);
        // }

        for (let index = 1; index <= 10; index++) {
            // 如果当前的index = 5 ,就不再往下 循环了,就终止循环
            if (index === 5) {
                break;
            }
            // //  index===5&&break // 不能简写 报错!!
            console.log(index);

            // if (index < 5) {
            //   console.log(index);
            // }
            console.log("代码调用的次数", index);
        }
    </script>