08.循環
1.循環！
循環的作用：
-
簡化代碼，處理重復執行的代碼
-
遍歷數組、json對象、節點集合
2.while循環
語法：
while(循環的條件){
循環體
}
3.循環的五大要素
-
循環變量
-
循環變量的初始化
-
循環的增值
-
循環的終止條件
-
循環體
eg:在頁面中打印100句“我愛你！！”;
方法一：
var i = 1; //循環變量 以及 循環變量的初始值
while (i <= 100) { //循環的終止條件
document.write("我愛你" + i + "<br>");
i++; //循環變量的增值
}
方法二：
var i =1; //循環變量以及初始值
while(true){
document.write("我愛你啊" + i + "<br>");
i++;
//終止條件
if(i > 100){
break;
}
}
09.while循環案例
1.怎么實現1-50的和？
<script>
var i = 1;
var sum = 0;
while(i <= 50){
sum += i;
i++;
}
console.log(sum);
</script>
2.打印100以內7的倍數
var i = 1;
while(i <= 100){
if(i % 7 == 0 ){
console.log(i);
}
i++;
}
3.打印100以內的奇數
var i = 1 ;
while(true){
if(i % 2 != 0){
console.log(i);
}
i++;
if( i > 100 ){
break;
}
}
4.打印100以內所有偶數的和
var i = 1 ;
var sum = 0;
while( i <= 100 ){
if( i % 2 == 0 ){
sum += i;
}
i++;
}
console.log(sum);
1.案例：輸入分數，判定成績等級 優 良 中 差
var num = 100;
if( num <= 100 && num > 90 ){
console.log("優")
}else if(num <= 90 && num > 80){
console.log("liang")
}else if( num <= 80 && num > 70 ){
console.log("zhong")
}else{
console.log("差")
}
2.輸入月份，顯示當月的天數 case穿透
分析：1 3 5 7 8 10 12 31天
var month = 2;
switch(month){
// case 1 : console.log("31天");
// break;
// case 2 : console.log("28天");
// break;
// case 3 : console.log("31天");
case 1 :
case 3 :
case 5 :
case 7 :
case 8 :
case 10 :
case 12 :
console.log("31天");
break;
case 4 :
case 6 :
case 9 :
case 11 :
console.log("30天");
break;
case 2 : console.log("28天");
break;
default : console.log("輸入錯誤...");
}
while的執行邏輯：
首先先進行變量的判斷，如果不滿足則不進入循環體，如果滿足，則進入循環體，循環執行完畢，變量的增值，再進行條件的判斷...
do while 的執行邏輯：
首先先進入循環體，執行一次，然后再進行變量的自增，然后再次判斷.....
eg:
var i = 10;
while(i < 15){
console.log(i);
i++;
}
練習：入職薪水10k，每年漲幅5%，50年后工資多少?
var money = 10000;
var year = 1;
do{
//循環體
money *= 1.05;
year++;
}while(year <= 50);
console.log(money);
02.for循環
for循環的執行邏輯：
首先先聲明循環變量，為變量賦值，然后進行條件判斷。如果條件成立則進入循環體，循環體執行完畢，循環變量增值，自增之后再次對條件進行判斷.....
for(語句1,語句2,語句3){
//循環體
}
語句1：循環變量 以及 初始值
語句2：循環的終止條件
語句3：循環變量的增值
eg:
for(var i = 0 ; i < 10 ; i++){
console.log(i);
}
練習：
1.打印100-200之間所有能被3或者7整除的數
for(var i = 100 ; i <= 200 ; i++){
if(i % 3 == 0 || i % 7 == 0){
console.log(i);
}
}
2.計算100的階乘
var product = 1;
for(var i = 1 ; i <= 100 ; i++){
product *= i;
}
console.log(product);
03.循環嵌套
1.實現表格:
<style>
td{
width:100px;
height:30px;
border:2px solid red;
}
</style>
<script>
document.write("<table>");
for(var i = 0 ; i < 10 ; i++){
document.write("<tr>");
//打印的td
for(var k = 0 ; k < 10 ; k++){
document.write("<td></td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
2.九九乘法表:
for(var i = 1 ; i <= 9 ; i++){
for(var j = 1 ; j <= i ;j++){
document.write(j + "*" + i + "=" + i * j + " ");
}
document.write("<br><br>")
}
04.循環練習
1.打印100以內所有偶數的和
var sum = 0;
for(var i = 1 ; i <= 100 ; i++){
if(i % 2 == 0){
sum += i;
}
}
document.write("sum");
2.打印出1000-2000年中所有的閏年，並以每行四個數的形式輸出（閏年條件：非整百年，被4整除，或者被400整除）
var count = 0;
for(var i = 1000 ; i <= 2000 ; i++){
if(i % 100 !== 0 && i % 4 == 0 || i % 400 == 0){
document.write(i + " ");
//每打印一個閏年，計數器加1，當計數器能被4整除的時候，打印一個換行
count++;
if(count % 4 == 0){
document.write("<br>");
}
}
}
3.打印直角三角形(5行)
<style>
*{
margin:0;
padding:0;
}
div{
width:10px;
height:10px;
background:red;
margin:10px;
display:inline-block;//讓顯示在同一行
}
</style>
<script>
for(var i = 1 ; i <= 5 ; i++){
for(var k = 1 ; k <= i ; k++){
document.write("<div></div>" + " ");
}
document.write("<br>");
}
</script>
4.打印等腰三角形:
<style>
*{
margin:0;
padding:0;
}
div{
width:10px;
height:10px;
background:red;
margin:10px;
display:inline-block;//讓顯示在同一行
}
span{
width:10px;
height:10px;
//background:green;
display: