代码示例:
<!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>
点击效果:
