1-5-JS基础-数组应用及实例应用
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基础-数组应用及实例应用的更多相关文章
- JS基础——数组总结
JS中数组被觉得是一种对象,慢慢的,怎么忽然感觉,JS中仅仅要能够独立出来的概念怎么都能够当成对象来解释呢?有点儿怀疑.继续学吧.先来总结一下JS中数组是怎样详细使用的. 一.创建 数组的创建在JS中 ...
- JS基础-数组的常用方法-冒泡排序
1.数组 1.关联数组 以数字作为元素下标的数组,就是索引数组. 以字符串作为元素下标的数组,就是关联数组. 2.js的关联数组 ex:在php中 $array=[& ...
- js基础-数组及数据类型
数组也是引用类型 构造函数创建数组 Object 构造函数类型(所有类型基类) Array 构造函数类型 求幂运算符 ** 2**32-1 数组容量最大 arry.length 如果减小len ...
- js替换数组中字符串实例
这个是替换数组中的一个对象字符串: 直接上代码: var aaa=[ {"name":"张珊","sex":"man"} ...
- 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 } ...
- JS常用数组方法及实例
1.join(separator):将数组的元素组起一个字符串,以separator为分隔符 ,,,,]; var b = a.join("|"); //如果不用分隔符,默认逗号隔 ...
- js基础---数组方法
数组数据的排序及去重 sort无形参的排序方式 arr1=[2,12,3,15]; var a=arr1.sort();console.log(arr1);console.log(a);//排序会改变 ...
- js基础——数组的概念及其方法
数组: 概念:是一种特殊的对象. 与普通对象的区别:a.普通对象使用字符串作为属性名,而数组使用数字作为索引来操作元素: b.数组的存储性能比普通对象好 数组的标志:[ ] 数组的索引:是从0开始的整 ...
- js基础----数组
1.数组如何定义 //第一种定义方法 var arr=[1,2,3,4]; //第二种定义方法 var arr=new Array(1,2,3,4); 两者没有任何区别,[]的性能可能略高,因为代码短 ...
随机推荐
- JVM CPU Profiler技术原理及源码深度解析
研发人员在遇到线上报警或需要优化系统性能时,常常需要分析程序运行行为和性能瓶颈.Profiling技术是一种在应用运行时收集程序相关信息的动态分析手段,常用的JVM Profiler可以从多个方面对程 ...
- 松软科技Web课堂:JavaScript Break 和 Continue
break 语句“跳出”循环. continue 语句“跳过”循环中的一个迭代. Break 语句 在本教程稍早的章节中,您已见到了 break 语句.它被用于“跳出” switch 语句. brea ...
- 【iOS翻译】对UIGestureRecognizer多种手势傻傻分不清
UIGestureRecognizerDelegate A set of methods implemented by the delegate of a gesture recognizer to ...
- Appium(七):Appium API(一) 应用操作
1. 应用操作 本章所罗列的方法主要针对应用的操作,如应用的安装.卸载.关闭.启动等. 把前面的启动代码放在这里,后面只展示不同的部分. # coding:utf-8 from appium impo ...
- Spring中常见的设计模式——委派模式
一.委派模式的定义及应用场景 委派模式(Delegate Pattern)的基本作用是负责任务的调用和分配,跟代理模式很像,可以看做特殊情况下的静态的全权代理,但是代理模式注重过程,而委派模式注重结果 ...
- 深入理解 ZK集群中通过Processor保证数据一致性
入口 书接上篇博客中的ZK集群启动后完成数据的统一性恢复后,来到启动ZkServer的逻辑,接下来的重点工作就是启动不同角色的对应的不同的处理器Processor 如上图查看ZooKeeperServ ...
- HeadFirst设计模式<1>
HeadFirst设计模式<1> 1 策略模式 鸭子飞行和嘎嘎叫策略 2 工厂模式 简单工厂 工厂方法 抽象工厂 简单工厂简单的pizza工厂 通过一个工厂类的方法,创建和返回对象实例 原 ...
- SSH框架之Spring第四篇
1.1 JdbcTemplate概述 : 它是spring框架中提供的一个对象,是对原始JdbcAPI对象的简单封装.spring框架为我们提供了很多的操作模板类. ORM持久化技术 模板类 JDBC ...
- Oracle 分页 ROWNUM 两种分页方法和ROWID用法
一 原因一 oracle默认为每个表生成rowmun,rowid字段,这些字段我们称之为伪列 测试表 CREATE TABLE A ( AID NUMBER() primary key, ANAME ...
- robotframework框架 - 在Pycharm当中编写RobotFramework测试用例
众所周知,pycharm是个写python极好用的编辑器.也可以装很多的插件来完成各种骚操作. 某一天,心血来潮在pycharm的插件库里,搜索了一下robot,恩,发现有支持robotframewo ...