码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript之for

时间:2019-01-06 14:34:38      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:back   button   跳出循环   input   NPU   body   type   charset   for循环语句   

代码示例:

<!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]+"  />;
       }
    };
</script>

点击效果:

技术分享图片

 

JavaScript之for

标签:back   button   跳出循环   input   NPU   body   type   charset   for循环语句   

原文地址:https://www.cnblogs.com/zjm1999/p/10228691.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!