js-for循环

最新推荐文章于 2024-07-12 16:27:40 发布

A1008M

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量25

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/A1008M/article/details/134216668

版权

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>
    <style>
        div{
            width: 100px;
            margin: 5px;
            background-color: red;
            display: inline-block;
            padding: 5px;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>

</body>
<script>
    
    for (j = 1; j <= 9; j++) {
            for (var i = 1; i <= j; i++) {
                document.write('<div>'+i+'*'+j+'='+j*i+'</div>')
            }
            document.write('<br>');
        }
</script>

</html>

倒过来的九九乘法表

<!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{
            width: 100px;
            margin: 5px;
            background-color: red;
            display: inline-block;
            padding: 5px;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    
</body>
<script>
    for (j = 9; j >= 1; j--) {
            for (var i = 1; i <= j; i++) {
                document.write('<div>'+i+'*'+j+'='+j*i+'</div>')
            }
            document.write('<br>');
        }
</script>
</html>

案例二：

<!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>
        .red{
            width: 50px;
            height: 50px;
            display: inline-block;
            background-color: red;
            margin: 5px;
        }
        .green{
            width: 50px;
            height: 50px;
            display: inline-block;
            background-color: transparent;
            margin: 5px;
        }
    </style>
</head>
<body>
    
</body>
<script>
    for(j=1;j<=4;j++){
        for(a=1;a<=5-j;a++){
            document.write('<div class="green"></div>');
        }
        for(i=1;i<=j*2-1;i++){
            document.write('<div class="red"></div>');
        }
        document.write('<br>');
    }

    for(b=5;b>=1;b--){
        for(c=1;c<=5-b;c++){
            document.write('<div class="green"></div>');
        }
        for(d=1;d<=b*2-1;d++){
            document.write('<div class="red"></div>');
        }
        document.write('<br>');
    }
</script>
</html>