array 数组 一般简写arr

格式 var arr [ '第1个','第2个','第3个','第4个' ] 最后一个不要叫逗号

alert(arr.length) 弹出数组长度 4个

alert(arr[0]) 弹出第1个

alert(arr[arr.length-1])  找数组最后一个

arr.push  往数组最后一位添加数据 alert(arr)  弹出所有数组的内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>html属性操作</title>

<style>

*{ margin:0; padding:0}

#content{ width:400px; height:400px; border:10px solid #ccc; margin:40px auto; position:relative; background:#f1f1f1}

#content a{ width:40px; height:40px; background:#000; border:5px solid #fff; position:absolute; top:175px; text-align:center; line-height:40px; color:#fff; opacity:1; text-decoration:none}

#content a:hover{opacity:0.8}

#prev{ left:10px;}

#next{right:10px}

#text,#span1{ position:absolute; left:0;  width:400px; border:0; height:30px; line-height:30px; background:#000; text-align:center; color:#fff;opacity:0.8}

#text{bottom:0;}

#span1{top:0;}

#img1{width:400px; height:400px;}

</style>

<script>

window.onload = function(){

	var oText = document.getElementById('text');

	var oPrev = document.getElementById('prev');

	var oNext = document.getElementById('next');

	var oSpan = document.getElementById('span1');

	var oImg = document.getElementById('img1');

	var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];

	var arrText = ['标题1','标题2','标题3','标题4'];

	var num = 0;

	//初始化

	function fnTab(){

    oSpan.innerHTML = num+1+'/'+arrText.length;

	oImg.src=arrUrl[num];

	oText.innerHTML=arrText[num];

		}

	 fnTab();

	oNext.onclick = function(){

		num++;

		if(num==arrText.length){

			num=0;

			}

		fnTab();

		}

	oPrev.onclick = function(){

		num--;

		if(num==-1){

			num=arrText.length-1;

			}

		fnTab();

		}

	}

</script>

</head>

<body>

<div id="content">

<a id="prev" href="javascript:;"><</a>

<a id="next" href="javascript:;">></a>

<p id="text">文字正在加载中</p>

<span id="span1">数量正在计算中</span>

<img id="img1"/>

</div>

</body>

</html>

1-5-JS基础-数组应用及实例应用的更多相关文章

  1. JS基础——数组总结

    JS中数组被觉得是一种对象,慢慢的,怎么忽然感觉,JS中仅仅要能够独立出来的概念怎么都能够当成对象来解释呢?有点儿怀疑.继续学吧.先来总结一下JS中数组是怎样详细使用的. 一.创建 数组的创建在JS中 ...

  2. JS基础-数组的常用方法-冒泡排序

    1.数组  1.关联数组    以数字作为元素下标的数组,就是索引数组.    以字符串作为元素下标的数组,就是关联数组.  2.js的关联数组    ex:在php中       $array=[& ...

  3. js基础-数组及数据类型

    数组也是引用类型 构造函数创建数组 Object 构造函数类型(所有类型基类)   Array 构造函数类型 求幂运算符 **   2**32-1 数组容量最大 arry.length 如果减小len ...

  4. js替换数组中字符串实例

    这个是替换数组中的一个对象字符串: 直接上代码: var aaa=[ {"name":"张珊","sex":"man"} ...

  5. JS基础——数组API之数组操作(filter、map、some、every、sort)

    var arr = [1,2,3,4];   forEach arr.forEach((item,index,arr) => { console.log(item) //结果为1,2,3,4 } ...

  6. JS常用数组方法及实例

    1.join(separator):将数组的元素组起一个字符串,以separator为分隔符 ,,,,]; var b = a.join("|"); //如果不用分隔符,默认逗号隔 ...

  7. js基础---数组方法

    数组数据的排序及去重 sort无形参的排序方式 arr1=[2,12,3,15]; var a=arr1.sort();console.log(arr1);console.log(a);//排序会改变 ...

  8. js基础——数组的概念及其方法

    数组: 概念:是一种特殊的对象. 与普通对象的区别:a.普通对象使用字符串作为属性名,而数组使用数字作为索引来操作元素: b.数组的存储性能比普通对象好 数组的标志:[ ] 数组的索引:是从0开始的整 ...

  9. js基础----数组

    1.数组如何定义 //第一种定义方法 var arr=[1,2,3,4]; //第二种定义方法 var arr=new Array(1,2,3,4); 两者没有任何区别,[]的性能可能略高,因为代码短 ...

随机推荐

  1. python 多线程编程之使用进程和全局解释器锁GIL

    本文主要介绍如何在python中使用线程. 全局解释器锁: python代码的执行是由python虚拟机(又名解释器主循环)进行控制的.python中,主循环中同时只能有一个控制线程在执行,就像单核C ...

  2. Wiki语法大全

    原文链接:wiki语法大全  编辑一个维客页面十分容易.只要点击页面上方的“编辑本页”或右侧的[编辑]链接即可修改该页,或点击“讨论本页”然后再点击“编辑页面”来讨论该页面.点击后您就会看到一个包含那 ...

  3. 在命令提示符下，运行Java程序时，提示"找不到或无法加载主类"

    小白:在命令提示符下,运行Java程序时,提示"找不到或无法加载主类". 大神:运行Java程序的作用是让Java解释器装载,检验并运行字节码文件(.class).因此,在运行Ja ...

  4. Linux上用IP转发使内部网络连接互联网

    IP转发的概念: 使 Linux 机器像路由器一样将数据从一个网络发送到另一个网络.所以,它能作为一个路由器或者代理服务器,实现将一个连接的互联网或者网络连接共享给多个客户端机器. 1. 启用 IPv ...

  5. LICEcap 动画屏幕录制软件

    下载地址    https://licecap.en.softonic.com/ LICEcap捕捉屏幕的区域并保存为gif动画或lcf格式 效果请看下面的链接 https://www.cnblogs ...

  6. 树上前k大的包含不重复结点的长链

    一棵树,不一定是二叉树,在每个结点最多只属于一条链的情况下,处理出其中最长的前k个的长度. 最近训练赛做到两道题了,有必要总结一下. 不过我不知道是否有更专门的叫法. 借鉴了这位大佬的博客:https ...

  7. SpringBoot2 配置多数据源，整合MybatisPlus增强插件

    本文源码:GitHub·点这里 || GitEE·点这里 一.项目案例简介 1.多数据简介 实际的项目中,经常会用到不同的数据库以满足项目的实际需求.随着业务的并发量的不断增加,一个项目使用多个数据库 ...

  8. SSH框架之Spring第二篇

    1.1 基于注解的IOC配置 既注解配置和xml配置要实现的功能都是一样的,都是要降低程序间的耦合.只是配置的形式不一样. 1.2 环境搭建 1.2.1 第一步:拷贝必备的jar包 需要多拷贝一个sp ...

  9. JS---DOM---元素创建的不同方式---三种方式，5个案例

    元素创建-----为了提高用户的体验   元素创建的三种方式: 1. document.write("标签的代码及内容"); 2. 对象.innerHTML="标签及代码 ...

  10. (草稿)如何判断一名UiPath开发人员是否合格？

    一名合格的UiPath开发人员究竟需要具备什么核心技能?业务梳理?沟通技巧?VB.net吗?VBA吗?Python?还是SQL?出于多种原因,关于这一点总是众说纷纭,莫衷一是.尽管这些技术都算沾边,但 ...