好程序員Web前端分享程序的三大結構（二）while循環

時間 2019-12-11

原文原文鏈接

while(循環終止條件){html

}spa

案例code

案例打印100之內 7的倍數：htm

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <script>

        var a=0;

        while(a<=100){

            a++;

            if(a%7==0){

                document.write(a+'<br>');

            }

        }

        </script>

    </head>

    <body>

    </body>

</html>

案例打印100之內全部偶數的和blog

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <script>

        var a=0;

        var res=0;

        while(a<=100){

            a++;

            if(a%2==0){

                res+=a;

            }

        }

        document.write(res)

        </script>

    </head>

    <body>

    </body>

</html>

打印圖形ip

*utf-8

**　開發

***字符串

****it

*****

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <script>

    var second=0;//一共打印多少行;>>>五行

    while(second<=5){

        second++

        var length=0;

        while(length<=10){//一行打印多少個>>>十個

            length++;

            document.write('*');

        }

        document.write('<br>')

    }

        </script>

    </head>

    <body>

    </body>

</html>

for循環

for循環將while循環分離的結構進行了整,將變量的聲明自增，以及判斷放入了括號中。寫法更簡單在開發中推薦使用。

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



     //語句塊



}



for循環的執行順序。(從上到下，從左到右？不！！)



1.先聲明變量，2.而後判斷，3.以後讀取語句塊，4.最後再對變量進行自增。



for(var i = 0 （1.聲明變量） ; i < 10(2.進行判斷) ; i ++（4.對變量進行自增）){

     //語句塊（3.讀取語句塊）

}

案例：打印99乘法表

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <script>

            for(var i = 1 ; i < 10;i++){ //前面的數字 i;

               for(var j = 1; j <= i; j++){//後面的數字 j

                    document.write(i+'*'+j+'='+i*j+' ');//拼接第一個是公式，要用字符串拼接；第二個是計算結果用數字計算。最後加了一個空格 讓頁面更美觀。

               }

               document.write('<br>')

            }

        </script>

    </head>

    <body>

    </body>

</html>

案例：計算1+3+5+...+99的和：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <script>

            var res=0;

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

               res+=i;

            }

            document.write(res);

        </script>

    </head>

    <body>

    </body>

</html>

案例：求1*2*3*4*5*6....的結果；

<html lang="en">

<head>

<meta charset="utf-8">

<script>

var res = 1;

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

res *= i;

}

document.write(res)

</script>

</head>

<body>

</body>

</html>