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 οnclick="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;
}