javascript 复合数据的定义和使用 ( 小例子 )

思路:主要是先要获取到三个 box 元素的 top 值 和 left 值,然后有复合数据进行存值,再进行数组值的位置移动来实现切换 box 位置效果;

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<style>

#warp{margin:50px;position:relative;}

#wrap div{position:absolute;width:100px;height:100px;}

.box1{background:orange;left:0px;top:100px;}

.box2{background:red;left:200px;top:50px;}

.box3{background:pink;left:400px;top:100px;}

</style>

<body>

<input type="button" value="←" id="leftBtn">

<input type="button" value="→" id="rightBtn">

<div id="wrap">

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</div>

</body>

</html>

<script>

window.onload = function(){

var oLeftBtn = document.getElementById(‘leftBtn‘);

var oRightBtn = document.getElementById(‘rightBtn‘);

var oWrap = document.getElementById(‘wrap‘);

var aBox = oWrap.getElementsByTagName(‘div‘);

//定义一个空数组,来存复合数据

var arr = [];

//定义函数来获取样式表里的值

function getStyle(obj,attr){

return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];

}

//获取 box 元素的top left值

for( var i=0; i<aBox.length; i++ ){

//利用复合数据来存两个值,而且把两个值放在一个组,这样就划分为三组数据

arr.push( [ getStyle(aBox[i],‘top‘) , getStyle(aBox[i],‘left‘) ] );

}

//向左移动

oLeftBtn.onclick = function(){

//往后堆数组中的第一对值

arr.push(arr[0]);

//移除数组的第一对值,那么这样的操作就会实现切换效果

arr.shift();

//调用设置元素位置的函数

setAttr();

}

oRightBtn.onclick = function(){

//向前堆数组中的第一对值

arr.unshift(arr[arr.length-1]);

//移除数组最后一对值,那么也就实现了切换效果

arr.pop();

//调用设置元素位置的函数

setAttr();

}

//定义每个box的 top 和left 值;

function setAttr(){

for(var i=0 ; i < aBox.length ; i++){

//分解一下这个 arr[i][0] ,如果 i=0 时 , arr[0][0] 那么返回值是 arr里面的第一组的第一个值即是top

aBox[i].style.top = arr[i][0];

//第二个值就是left值

aBox[i].style.left = arr[i][1];

}

}

}

</script>

javascript 复合数据的定义和使用 ( 小例子 )

时间: 2024-11-04 18:25:46

javascript 复合数据的定义和使用 ( 小例子 )的相关文章

五个小例子教你搞懂 JavaScript 作用域问题

众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者将使用五个小例子来给大家分析下 JavaScript 的作用域要注意的问题. 感谢 例子的来源 (这5个例子我做错了2个 [嘿嘿,尽情鄙视吧],笔者就是要 死磕自己,奉献大家!) 先给出五个例子: 每个例子旁边都会给出答案的链接,如果你全部都正确了,你可以忽略这篇短文,并深深的鄙视下笔者. 例一:

AJAX一些基础知识和小例子讲解

首先说下AJAX不是一种语言 是一种技术. AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax核心是一个new XMLHttpRequest()对象/ 在ie5.6中为new ActiveXObject("Microsoft.XMLHTTP")对象; XMLHttpRequest对象用于数据

IOS下WEBVIEW 的javascript数组与json定义 及交互

最近在折腾IOS新闻浏览客户端,当中需要用到webview传递JSON数据到IOS上,然后在IOS上解析.刚入门IOS不久,看了不少的书,但都是囫囵吞枣.在开发过程中,遇到不少问题.开发环境mac mini (IOS端开发)thinkpad x200s(PHP开发)功能实现:在WEBVIEW创建DOM监听,判断用户按下WEBVIEW上链接,通过DOM获取相关链接信息,遍历数组,最终用$.toJSON(jsArray);//将JS数组转换成JSON格式下面记录一下1.JS数组定义最终在WEBVIE

javascript 利用 - 枚举思想 - 添加地名的一个小例子

利用枚举思想来添加地名,主要功能是:判断点击a标签(即当前的地名)如果在ul的li不存在的话那么就添加,有则不添加,而且还提供了相应的排序功能... HTML代码: <div id="china"> <a href="javascript:;">广州</a> <a href="javascript:;">深圳</a> <a href="javascript:;"

HealthKit开发教程之HealthKit的复合数据

HealthKit开发教程之HealthKit的复合数据 复合数据就是复合单位和值构成的数据.所谓复合单位就是由单位进行乘法.除法等得到的单位,如m/s.lb·ft等就是复合单位.本节将针对这些复合数据进行讲解. HealthKit的相乘得到的复合数据 在物理学中我们可能接触过类似lb·ft(扭矩单位,扭矩是使物体发生转动的一种特殊的力矩.)这样的单位.这种单位我们可以看做是两个单位相乘得到的复合单位.开发者如果想要在自己的程序中使用这种复合单位,首先需要对这种单位进行创建.创建这种单位需要使用

JavaScript基础中的基础(小例子:滚动字幕)

一.变量 局部变量声明前面要加"var" <script type="text/javascript"> // 全局变量 name = 'alex'; function func(){ // 局部变量 var age = 18; // 修改全局变量name name = "eric" } </script> 二.数据类型 数据类型有:数字.字符串.布尔值      数组.字典 数字.字符串.布尔值.null.undefin

栅格重分类和条件函数均可以实现对流量统计数据进行定义划分

ArcGIS水分分析工具的流向分析是基于D8单流向算法,如果分析使用的DEM存在凹陷点,就会产生汇,导致径流断流从而影响了分析结果.在前面章节<ArcGIS水文分析实战教程(2)ArcGIS水文分析工具的基本原理>中又介绍过D8算法,而<ArcGIS水文分析实战教程(4)地形预处理>章节中笔者也较少过如何创建无凹陷点得DEM数据,在使用流向分析工具之前可以先行阅读. 首先流向分析要使用填洼过的数据,确保DEM数据没有凹陷点.如果数据准备妥当,直接使用水文分析工具箱中的[流向]工具进

用聚合数据API快速写出小程序(苏州实时公交)

利用聚合数据API快速写出小程序,过程简单. 1.申请小程序账号 2.进入开发 3.调用API.比如"苏州实时公交"小程序,选择的是苏州实时公交API. 苏州实时公交API文档:https://www.juhe.cn/docs/api/id/31 如下,是"苏州实时公交"小程序调用代码:  var url = "https://apis.juhe.cn/szbusline/bus";    //为了您的密钥安全,建议使用服务端代码中转请求,事例代

关于数据筛选的不打不小的问题

问题如下: 假设这样一种情况,首先说明,信息是存放在mysql数据库中的.情况如下,A表信息堆是百万级信息堆(每条信息长度不长,基本在20字符以内,属于简短词语),B则是一条普通信息(长度大概在500字符左右),问,有哪种最有效的方式可以来判断B信息中是否包含有A堆中的信息并返回包含的信息? 在此提供一种解法,如果大家有更好的解法欢迎大家留言交流! 由于A信息堆数据量比较大并存放于数据库中,故产生一个很简单的解法,直接通过一条sql解决,当然,这样会衍生一个问题就是sql优化,如何减少搜索时间就