JavaScript之for
阿新 • • 發佈：2019-01-06
程式碼示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>for迴圈</title> <style type="text/css"> img{ width: 300px; height: 300px; } </style> </head> <body> <!--for迴圈語句 格式:for(①宣告初始變數;②通過初始變數與最終變數比較控制迴圈次數;③初始變數變化){ ④迴圈體語句; } 注意:操作步驟②是控制迴圈次數,條件為真執行步驟④,為假跳出迴圈體,需要注意迴圈條件要有終止條件,比如i<5時,若i=5時,條件不滿足,為假跳出迴圈.否則是死迴圈(無限迴圈) --> <input type="button" value="onclickMe" id="按鈕"> <div id="box"> </div> </body> </html> <script type="text/javascript"> var box=document.getElementById('box'); var button=document.getElementById('按鈕'); var arr=['../JS屬性操作/img1.jpg','../JS屬性操作/img2.jpg','../JS屬性操作/img3.jpg','../JS屬性操作/img4.jpg',]; // 當點選按鈕的時候,div元素區新增圖片,通過迴圈下標為src新增五張圖片地址button.onclick=function(){ for(var i=0;i<arr.length;i++){ box.innerHTML+='<img src="'+arr[i]+'" alt="" />'; } }; </script>
點選效果:
