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); 两者没有任何区别,[]的性能可能略高,因为代码短 ...
随机推荐
- Linux服务器部署.Net Core笔记:四、安装Supervisor进程守护
Supervisor 是用 Python 开发的 Linux/Unix 系统下的一个进程管理工具.它可以使进程脱离终端,变为后台守护进程(daemon).实时监控进程状态,异常退出时能自动重启. Su ...
- IDEA开发、测试、生产环境pom配置及使用
pom文件 一般放在最下面,project里 <!--开发环境.测试环境.生产环境--> <!--生产环境--> <profiles> <profile> ...
- Appium(五):Desired Capabilities
1. Desired Capabilities Desired Capabilities简单来说就是一组设置,这些设置可以让测试脚本控制Appium的运行行为.下面就逐个对Desired Capabi ...
- c代码中while循环的一个死机问题引发的思考
前记 c语言已经是一门经常吃饭的本领,本来是要有种看一眼,就知道哪儿出问题了才行,没想到,遇到实际问题的时候,才知道自己的修为不到家.还没有达到那种炉火纯青的境界.看来,不是这个世界没有机会,是自 ...
- 计算几何 val.2
目录 计算几何 val.2 几何单位结构体板子 旋转卡壳 基础概念 求法 模板 半平面交 前置芝士:线段交 S&I算法 模板 最小圆覆盖 随机增量法 时间复杂度 模板 后记 计算几何 val. ...
- Redis 命令执行全过程分析
今天我们来了解一下 Redis 命令执行的过程.我们曾简单的描述了一条命令的执行过程,本篇文章展示深入说明一下,加深大家对 Redis 的了解. 如下图所示,一条命令执行完成并且返回数据一共涉及三部分 ...
- PHP+jQuery中国地图热点数据统计展示实例
一款PHP+jQuery实现的中国地图热点数据统计展示实例,当鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息. 首先在页面中加一个div#tip,用来展示地图信息的提示框和#map ...
- JavaWeb学习——web.xml文件说明
JavaWeb学习——web.xml文件说明 摘要:本文主要学习了web.xml文件的作用以及如果配置. 是什么 web.xml文件是用来在JavaWeb项目里面初始化配置信息的,比如:访问的首页.S ...
- vuex 精简demo解析
1.store/index.js 文件 import Vue from 'vue' import Vuex from 'vuex' //使用vuex Vue.use(Vuex); //一个store ...
- Computer: Use the mouse to open the analog keyboard
Xx_Introduction Please protection,respect,love,"China's Internet Security Act"! For learni ...