js中for循环嵌套

首先我们的for循环单个就是我们将内容全部输出出来执行的条件

1.首先声明初始值

2.设置条件

3.执行代码块

4.执行i++

代码如下，

<button type="button" onclick="tests()">测试10</button>
        <div id="dom10"></div><br />
        <script type="text/javascript">
            function tests() {
                var cons = "";//声明空的字符串,
                for (var i = 0; i < 10; i++) {//我们的循环这里就直接进行执行
                    cons += "这个数字为" + i + "<br>";//将内容进行输出赋值到我们空的字符串里面
                }
                document.getElementById("dom10").innerHTML = cons;//输出
            }
 </script>

 

js的for循环嵌套例子

1.声明初始值

2.设置条件

3.执行外圈代码

4.外圈执行一次外边循环全部

5.外圈执行代码块后，执行 i++

如果继续执行还是这个逻辑向下接着执行

代码如下，

<button type="button" onclick="testr()">循环数字拼接</button>
        <button type="button" onclick="testu()">循环的数字相加</button>
        <button type="button" onclick="testd()">测试外圈内容</button>
        <button type="button" onclick="testg()">测试内圈内容</button>
        <div id="outer">外圈内容</div><br />
        <div id="within">内圈内容</div><br />
        <div id="dom11">循环数字拼接</div><br />
        <div id="doms11">循环的数字相加</div><br />
        <script type="text/javascript">
            function testd() {
                var outer = ""; //声明空的字符串,输出内圈内容
                var within = ""; //声明空的字符串,输出外圈内容
                for (var i = 0; i < 10; i++) {
                    outer += "外圈数字为" + i + "<br>";
                    document.getElementById("outer").innerHTML = outer;
                    for (var x = 10; x > 0; x--) {}
                }
            }

            function testg() {
                var outer = ""; //声明空的字符串,输出内圈内容
                var within = ""; //声明空的字符串,输出外圈内容
                for (var i = 0; i < 10; i++) {
                    for (var x = 10; x > 0; x--) {
                        within += "内圈内容为" + x + "<br>";
                    }
                }
                document.getElementById("within").innerHTML = within;
            }

            function testr() {
                var outer = ""; //声明空的字符串,输出内圈内容
                var within = ""; //声明空的字符串,输出外圈内容
                var conc = ""; //声明空的字符串,
                for (var i = 0; i < 10; i++) {
                    for (var x = 10; x > 0; x--) {
                        conc += "数字循环拼接为" + x + i + "<br>";
                    }
                }
                document.getElementById("dom11").innerHTML = conc;
            }
            function testu() {
                var outer = ""; //声明空的字符串,输出内圈内容
                var within = ""; //声明空的字符串,输出外圈内容
                var adding = ""; //声明空的字符串,
                for (var i = 0; i < 10; i++) {//我们外边循环1
                    for (var x = 10; x > 0; x--) {//里面循环9,8,7,6,5,4,3,2,1
                        adding +=  x + i + "数字循环增加为" + "<br>";
                       /*
                        *  然后将内容进行增加1+9,1+8,1+7.....
                        *   如果外面循环第二次内部为2+9,2+8,2+7......
                        *      后面套路一样
                        *  --注意
                        *     这个和上面的是一样的我们的字符串位置改然后它的值就进行了更改。
                        *      如果数组相加前面有字符串那么我们数字就为拼接，如果在数字后面这个不影响
                        *       
                        */
                    }
                }
                document.getElementById("doms11").innerHTML = adding;
            }
        </script>

 

 

这里有我之前学习js的时候练习的例子（可能存在问题，但是大致都是可以的，可以学习一下）；

链接：https://pan.baidu.com/s/1RZOZwt4CBlvuf7Pmurkp2Q 
提取码：v5cv

 

关注微信公众号：会篮球的程序猿