1. 程式人生 > >【程式碼筆記】Web-JavaScript-javaScript for迴圈

【程式碼筆記】Web-JavaScript-javaScript for迴圈

一,效果圖。

 

二,程式碼。

 

複製程式碼
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>javascript for迴圈</title> </head> <body> <script> cars = ["bmw", "volvo", "saab", "ford"]; for (var i = 0; i < cars.length; i++) { document.write(cars[i] + "<br>"); } </script> <p>點選按鈕迴圈程式碼5次</p> <button onclick="myFunction()">點選這裡</button> <p id="demo"></p> <script> function myFunction() { var x = ""; for (var i = 0; i < 5; i++) { x = x + "the number is" + i + "<br>"; } document.getElementById("demo").innerHTML = x; } </script> <p>點選下面的按鈕,迴圈遍歷物件"person"的屬性</p> <button onclick="myFunction()">點選這裡</button> <p id="demo1"></p> <script> function myFunction() { var x; var txt = ""; var person = { fname: "bill", lname: "gates", age: 56 }; for (x in person) { txt = txt + person[x]; } document.getElementById("demo1").innerHTML = txt; } </script> </body> </html>
複製程式碼

 

參考資料:《菜鳥教程》

一,效果圖。

 

二,程式碼。

 

複製程式碼
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>javascript for迴圈</title> </head> <body> <script> cars = ["bmw", "volvo", "saab", "ford"]; for (var i = 0; i < cars.length; i++) { document.write(cars[i] + "<br>"); } </script> <p>點選按鈕迴圈程式碼5次</p> <button onclick="myFunction()">點選這裡</button> <p id="demo"></p> <script> function myFunction() { var x = ""; for (var i = 0; i < 5; i++) { x = x + "the number is" + i + "<br>"; } document.getElementById("demo").innerHTML = x; } </script> <p>點選下面的按鈕,迴圈遍歷物件"person"的屬性</p> <button onclick="myFunction()">點選這裡</button> <p id="demo1"></p> <script> function myFunction() { var x; var txt = ""; var person = { fname: "bill", lname: "gates", age: 56 }; for (x in person) { txt = txt + person[x]; } document.getElementById("demo1").innerHTML = txt; } </script> </body> </html>
複製程式碼

 

參考資料:《菜鳥教程》