JavaScript循环语句++

1循环嵌套

for(var i=0;i<10;i++){

    for(var j=0;j<10;j++){

        console.log(i,j);

    }

}

for循环执行过程：1.变量初始化；2.条件判断；3.执行代码；4.变量更新。上述代码中，外部的for循环1次，内部的for循环10次。

2循环跳转

2.1 break

break：//退出当前整个循环

1.只能在循环语句中使用；

2.循环体中位于break后的语句不会被执行；

3.在多层循环嵌套中，一个break语句只向外跳一层；

 

2.2 continue

continue：//跳过本次循环，继续下一次循环

1.只能在循环语句中使用，

2.结束本次循环（即跳过循环体中下面尚未执行的代码），接着执行下次循环。

2.3 label标识

label：给循环代码添加标识。

break和continue后如果带标识，则跳到标识所在循环。

例：    wrap: for(){

for(){

If(){

break wrap;

}

}

}

则终止的为for循环。

3 案例

3.1 生成动态表格

<label for="row">行：</label>

<input type="text" id="row">

<label for="col">列：</label>

<input type="text" id="col">

<button onclick="createTable()">生成表格</button>

<div id="output"></div>

<!-- <table>

<tbody>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</tbody>

</table> -->

<script>

/*

思路：

1) 获取元素

2）点击按钮生成表格

* 获取输入的值

* 根据输入的行数拼接表格html结构

* 把拼接的html解构写入#output

*/

// 1) 获取元素

var row = document.getElementById('row');

var col = document.getElementById('col');

var output = document.getElementById('output');

 

// 声明一个函数

// 用于生成表格代码

function createTable(){

// * 获取输入的值

var _row = row.value;

var _col = col.value;

 

// 用保存table的html结构

var tableHtml = '<table><tbody>';

 

// 外层循环控制行

for(var i=1;i<=_row;i++){

tableHtml += '<tr>';

 

// 显示行号

tableHtml+='<td>'+i+'</td>';

 

// 内层循环控制列

for(var j=1;j<=_col;j++){

tableHtml+='<td>单元格'+i+j+'</td>';

}

 

// 编辑/删除

tableHtml+='<td><button>编辑</button><button>删除</button></td>';

 

 

// 闭合tr

tableHtml += '</tr>';

}

 

// 闭合table,tbody标签

tableHtml += '</tbody></table>';

 

console.log(tableHtml);

output.innerHTML=tableHtml;

 

}

</script>

</body>

</html>

3.2 字符串拼接、转换数字

 var number1 = document.getElementById('number1');

        var number2 = document.getElementById('number2');

        function count(){

            // 提取到input中的值，赋给a,n，不加Number是要a,n的值为字符串

            var a = number1.value;

            var n = number2.value;

            // 给总和 total赋予初始值为转换为数字的a

            var total = Number(a);

            // 给j赋予初始值a，为字符串；j为每次相加时数位最多的那个数

            var j = a;

            // i<n会进行隐式转换，将n从字符串转换为数字

            for(var i = 1;i < n;i++){

                // 因为j与a都为字符串，所以此处为拼接，而非相加

                j += a;

                // 将j从字符串转换为数字进行叠加

                total += Number(j);

                // console.log(j);

            }

            // console.log(total);

            output.innerHTML = total;

        }