请输入关键字进行搜索...

程序员鸡皮

文章 分类 评论
60 3 9
联系我
the theme is by @冷文学习者

站点介绍

一名PHP全栈程序员的日常......

重学Javascript基础（五） JavaScript的循环语句

abzzp 2024-10-02 180 0条评论 前端 JavaScript

首页 / 正文
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......

发布于2024-07-04

01.认识循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        while(true){
            console.log("hello World")
        }
    </script>
</body>
</html>

02.循环语句-while循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

03.while循环的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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++
        }

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

04.循环语句-do-while循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

05.循环语句-for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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) 
                count++
        */
       for(var count = 0;count < 3;count++){
        alert(count)
       }
    </script>
</body>
</html>

06.循环语句-for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

07.循环嵌套的理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

08.循环嵌套练习一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

09.循环嵌套练习二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

10.循环嵌套练习三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

11.循环嵌套练习三-美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

12.循环的控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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(name[i]==="nba" || names[i] === "cba"){
                continue
            }
            console.log(names);
        }
    </script>
</body>
</html>

13.随机生成数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // Match.random():[0,1)
        for(var i = 0;i < 1000;i++){
            var randomNum = Math.random() * 100
            randomNum = Math.floor(randomNum)
            console.log(randomNum)
        }

        // 生成一个0~99的随机数
        var randomNum = Math.floor(Math.random() * 100);
        
    </script>
</body>
</html>

14.猜数字游戏-综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

感谢大家观看，我们下次见

版权所属: abzzp
本文链接: https://xvzhu.cn/archives/50.html
协议授权: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》
下一篇 上一篇

评论(0)

最新评论

  • abzzp

    十天看一部剧，还可以吧[[呲牙]]

  • ab

    @梦不见的梦 行，谢谢提醒,我优化一下

  • 梦不见的梦

    网站的速度有待提升，每次打开都要转半天还进不来呢

  • abzzp

    @React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了，报错了吗？[[微笑]]

  • abzzp

    @Teacher Du 那是怕你们毕不了业，我大学那会儿给小礼品[[发呆]]

  • Teacher Du

    我们大学那会，献血还给学分~

  • 夜

    @ab 我想去学网安，比如网警，但分也贼高😕

  • ab

    @夜 加油，你一样也可以成为程序员的，需要学习资料可以V我

  • 夜

    佬发布的好多技术文章似乎我只能评论这篇，真正的程序员！！哇塞 我也想去献血，过两年就成年了可以去献血了

日历

2024年11月

日一二三四五六
     12
3456789
10111213141516
17181920212223
24252627282930

标签云

vue JavaScript React Golang 观后感 ES6 读后感

友情链接

白雾茫茫丶 时光日志 boys博客 云烟博客

文章目录

推荐关键字： vue JavaScript React Golang 观后感 ES6 读后感

站点公告
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......
点击小铃铛关闭
配色方案
高贵黑
默认配色
墨蓝色
优雅白