JavaScript之for循环-优快云博客

本文介绍了一种使用JavaScript中的for循环动态加载图片到HTML页面的方法。通过点击按钮，利用循环遍历图片数组，将每张图片的路径插入到div元素中，实现图片的批量显示。文章附有完整代码示例。

代码示例:

<!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>