循環可以將代碼塊執行指定的次數。

JavaScript 循環

如果您希望一遍又一遍地運行相同的代碼，并且每次的值都不同，那么使用循環是很方便的。

我們可以這樣輸出數組的值：

芝麻教程(web3.xin)

cars=["BMW","Volvo","Saab","Ford"];

for (var i=0;i

document.write(cars[i] + "
");

}

不同類型的循環

JavaScript 支持不同類型的循環：

for - 循環代碼塊一定的次數

for/in - 循環遍歷對象的屬性

while - 當指定的條件為 true 時循環指定的代碼塊

do/while - 同樣當指定的條件為 true 時循環指定的代碼塊

For 循環

for 循環是您在希望創建循環時常會用到的工具。

下面是 for 循環的語法：

for (語句 1; 語句 2; 語句 3)

{

被執行的代碼塊

}

語句 1 (代碼塊)開始前執行

starts.

語句 2 定義運行循環(代碼塊)的條件

語句 3 在循環(代碼塊)已被執行之后執行

芝麻教程(web3.xin)

點擊按鈕循環代碼5次。

點擊這里

function myFunction(){

var x="";

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

x=x + "該數字為 " + i + "
";

}

document.getElementById("demo").innerHTML=x;

}

從上面的例子中，您可以看到：

Statement 1 在循環開始之前設置變量 (var i=0)。

Statement 2 定義循環運行的條件(i 必須小于 5)。

Statement 3 在每次代碼塊已被執行后增加一個值 (i++)。

語句 1

通常我們會使用語句 1 初始化循環中所用的變量 (var i=0)。

語句 1 是可選的，也就是說不使用語句 1 也可以。

您可以在語句 1 中初始化任意(或者多個)值：

芝麻教程(web3.xin)

cars=["BMW","Volvo","Saab","Ford"];

for (var i=0,l=cars.length; i

document.write(cars[i] + "
");

}

芝麻教程(web3.xin)

cars=["BMW","Volvo","Saab","Ford"];

for (var i=0,l=cars.length; i

document.write(cars[i] + "
");

}

同時您還可以省略語句 1(比如在循環開始前已經設置了值時)：

芝麻教程(web3.xin)

cars=["BMW","Volvo","Saab","Ford"];

var i=2,len=cars.length;

for (; i

document.write(cars[i] + "
");

}

語句 2

通常語句 2 用于評估初始變量的條件。

語句 2 同樣是可選的。

如果語句 2 返回 true，則循環再次開始，如果返回 false，則循環將結束。

如果您省略了語句 2，那么必須在循環內提供 break。否則循環就無法停下來。這樣有可能令瀏覽器崩潰。請在本教程稍后的章節閱讀有關 break 的內容。

語句 3

通常語句 3 會增加初始變量的值。

語句 3 也是可選的。

語句 3 有多種用法。增量可以是負數 (i--)，或者更大 (i=i+15)。

語句 3 也可以省略(比如當循環內部有相應的代碼時)：

芝麻教程(web3.xin)

cars=["BMW","Volvo","Saab","Ford"];

var i=0,len=cars.length;

for (; i

document.write(cars[i] + "
");

i++;

}

For/In 循環

JavaScript for/in 語句循環遍歷對象的屬性：

芝麻教程(web3.xin)

點擊下面的按鈕，循環遍歷對象 "person" 的屬性。

點擊這里

function myFunction(){

var x;

var txt="";

var person={fname:"Bill",lname:"Gates",age:56};

for (x in person){

txt=txt + person[x];

}

document.getElementById("demo").innerHTML=txt;

}

您將在有關 JavaScript 對象的章節學到更多有關 for / in 循環的知識。

While 循環

我們將在下一章為您講解 while 循環和 do/while 循環。

總結

以上是生活随笔為你收集整理的html for循环正方形,JavaScript for 循环的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。