循环嵌套及练习（九九乘法表）

最新推荐文章于 2024-09-22 10:29:03 发布

好的v

最新推荐文章于 2024-09-22 10:29:03 发布

阅读量328

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/2301_79126937/article/details/131985208

版权

循环嵌套就是一个循环里再套一个循环一般用在for循环里基本不结构：

for (外部声明记录循环次数的变量;循环条件;变化值){

for (内部声明记录循环次数的变量;循环条件;变化值){

}

案例：打印出五行五列*

代码中的 i = 1 就是外部声明记录循环次数的变量 i<5就是循环条件 i++就是变化值

j = 1是内部声明记录循环次数的变量 j<5就是循环条件 j++就是变化值

<script> 

         //外层循环打印行数
         for(let i = 1; i<=5; i++){
        //内层循环打印几个*   
        for(let j= 1; j<=5;j++){
            document.write('*')
          
         //进行换行显示
         document.write('<br>')
         }
<script>

效果图：

九九乘法表

<!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>  
span {      //格式的样式设置到自己满意都行 更具自我来进行修改
            display: inline-block;
            width: 80px;
            padding: 5px 10px;
            border: 1px solid skyblue;
            margin: 2px;
            border-radius: 5px;
            box-shadow: 2px,2px,2px rgba(255, 192, 203, .4);
            background-color:rgba(255, 192, 203, .1) ;
            text-align: center;
        }
    </style>
</head>
<body>
    <script>



        //九九乘法表
        //1.外层循环控制行数
        for(let i = 1; i<= 9; i++){
            //2.内层循环控制列表
            for(let j =1; j<=i; j++){
            //设置一span标签可以更方便的进行对乘法表的样式进行修改 可以使其看起来更加美观
              document.write(`<span> ${j} x ${i} = ${j*i}</span>`)
            }
            //换行
            document.write('<br>')
        }
       
    </script>
</body>
</html>