JavaScript while 循環


只要指定條件為 true，迴圈就可以一直執行程式碼區塊。

while 迴圈

while 迴圈會在指定條件為真時循環執行程式碼區塊。

語法

while (條件)
  {
  需要執行的程式碼
  }

實例

本例中的迴圈將繼續運行，只要變數i 小於5：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	while (i<5){
		x=x + "该数字为 " + i + "<br>";
		i++;
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例

lamp#如果您忘記增加條件中所用變數的值，則該迴圈永遠不會結束。這可能導致瀏覽器崩潰。

do/while 迴圈

#do/while 迴圈是 while 迴圈的變體。這個迴圈會在檢查條件是否為真之前執行一次程式碼區塊，然後如果條件為真的話，就會重複這個迴圈。

語法

do
  {
  需要執行的程式碼
 }
while (條件);

實例

下面的範例使用do/while 迴圈。這個循環至少會執行一次，即使條件為false 它也會執行一次，因為程式碼區塊會在條件被測試前執行：

實例

##
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	do{
		x=x + "该数字为 " + i + "<br>";
	    i++;
	}
	while (i<5)  
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

運行實例»點擊"運行實例" 按鈕查看在線實例

#別忘記增加條件中所用變數的值，否則循環永遠不會結束！

比較 for 和 while

如果您已經閱讀了前面那一章關於 for 迴圈的內容，您會發現 while 迴圈與 for 迴圈很像。

本例中的迴圈使用

for 迴圈來顯示cars 陣列中的所有值：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];){
	document.write(cars[i] + "<br>");
	i++;
}
</script>

</body>
</html>

運行實例»點擊"運行實例" 按鈕查看線上實例

#本例中的循環使用

while 循環來顯示cars 數組中的所有值：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i]){
	document.write(cars[i] + "<br>");
	i++;
}
</script>

</body>
</html>

#運行實例»點擊"運行實例" 按鈕查看線上實例