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

js数组

时间:2017-03-28 00:26:46      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:自己的   开始   src   图片切换   属性   button   har   自己   console   

1.数组

* 数组
* 数据的组合
*
* 语法
* []
* 每个数据之间是用逗号隔开的,最后一个数据是没有逗号的;
*
* 每个数据都会对应一个下标(序号)
* 下标代表的意思是,每一个数据都有一个自己的标识,用于方便获取
* 下标识从0开始的
*
* 数组会有一个length属性,代表数组中的数据的个数
*
*
* 取数组中的某个数据
* 数组[下标值]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var color=[‘red‘,‘green‘,‘blue‘,‘white‘,‘black‘];
    console.dir(color);    #显示数组的内容

    console.log(color[1]);
    console.log(color[4]);

    console.log(color[color.length-1]); //pink


</script>
</body>
</html>

 

* 需求:点击下一张按钮,让图片切换成下一张图
* 点击上一张,让图片切换成上一张图
* 分析:
* 1、获取到下一张按钮
* 2、给按钮添加点击事件
* a、用属性操作的方法去修改图片的src;
* b、把数字存到一个变量里,点击下一张,就让这个变量加1.用字符串拼接的方法去修改图片的src属性;
*
* 累加
* n=n+1
* n+=1;
* n++;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{
            display: block;
        }
    </style>
    <script>
        window.onload= function () {
            var next=document.getElementById(‘next‘);
            var prev=document.getElementById(‘prev‘);
            var pic=document.getElementById("pic");
            var n=1;
            //下一张按钮点击事件
            next.onclick=function(){
                //点击一下n加1
                //n=n+1;
                //n+=1;
                n++;
                console.log(n);
                if(n>4){
                    n=4;    //总共4张图片
                }
                pic.src=n+‘.jpg‘;

            };
            //上一张按钮点击事件
            prev.onclick= function () {
                n--;
                if(n<1){
                    n=1;
                }
            }
        };
    </script>
</head>
<body>
<input type="button" id="prev" value="上一张" />
<input type="button" id="text" value="下一张" />
<img src="1.jpg"  id="pic"  />
</body>
</html>

  

js数组

标签:自己的   开始   src   图片切换   属性   button   har   自己   console   

原文地址:http://www.cnblogs.com/cqq-20151202/p/6629369.html

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