JavaScript基础学习(4)

发表于 | 分类于 ， ， | 阅读次数:

return、定时器

return：返回值
1）函数名+括号：fn1() ==> return 后面的值；
2）所有函数默认返回值：未定义；
3）return 后面任何代码都不再执行

arguments实参集合与局部变量、参数关系

当函数的参数个数无法确定时用arguments

1
2
3
4
5
6
7
8
9
alert(sum(1,2,3));	//6
alert(sum(1,2,3,4));	//10
function sum(){
	var n = 0;
	for(var i = 0; i < arguments.length; i++){
		n += arguments[i];
	}
	return n;
}

小练习：
alert(sum(1,2,3,’+’)); //6
alert(sum(10,2,3,4,’-‘)); //1

currentSytle 与 getComputedStyle

getComputedStyle 获取的是计算机（浏览器）计算后的样式 //IE 6 7 8 兼容问题
currentSytle 获取当前样式 //标准浏览器不兼容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getStyle(obj,attr){
	//if(obj.currentStyle){
	//	return obj.currentStyle[attr];
	//}else{
	//	return getcomputedStyle(obj)[attr];
	//}
	return obj.currentStyle?obj.currentStyle[attr]:getcomputedStyle(obj)[attr];
}

alert(getStyle(oDiv,'width'));
alert(getStyle(oDiv,'background'));	//获取复合样式会有问题
alert(getStyle(oDiv,'backgroundColor'));	//获取单一样式可以得到值，但会有兼容性问题，不要用来做判断
不要有空格
不要获取未设置的样式：不兼容

1
2
3
4
5
6
7
8
定时器：时间概念
var timer = setInterval(函数, 毫秒);	重复执行（发动机）
clearInterval(timer);	清除

var timer = setTimeout(函数, 毫秒);	执行一次（炸弹）
clearTimeout(timer);

定时器如果是由事件控制的，要先关后开，否则可能会出问题

【示例：点击查看】

定时器应用：自动切换焦点图、qq延时菜单
1.延时消失的菜单
2.凤凰网科技频道自动轮换选项卡
3.按钮控制商品图片上下滚动
4.淘宝商品广告效果

定时器管理、函数封装

练习：点击往下掉的小块，再点击回来，掉落过程中不可操作

抖动原理及实现过程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function getStyle(obj, attr){
	return obj.currentStyle?obj.currentStyle[attr]:getcomputedStyle(obj)[attr];
}
function shake(obj, attr, endFn){
	var pos = parseInt(getStyle(obj, attr)); //有隐患
	var arr = []; //20,-20,18,-18...0
	var num = 0;
	var obj.shake = null;
	for(var i = 20; i > 0; i -= 2){
		arr.push(i, -i);
	}
	arr.push(0);
	clearInterval(obj.shake);
	obj.shake = setInterval(function(){
		obj.style[attr] = pos + arr[num] + 'px';
		num++;
		if(num === arr.length){
			clearInterval(obj.shake);
			endFn && endFn();
		}
	}, 50);
}
function fnShake(){
	var _this = this;
	shake(_this, 'left', function(){
		shake(_this, 'top');
	});
}

【示例：点击查看】
练习：

  • 抖动函数的隐患、修复
  • 点击加分效果-可重复点击
  • 图片自动切换
  • 新浪数码频道选项卡
    注：
    抖函数的问题在于每次移入的时候,
    是获取的当前的位置,
    可以从如下方向解决:
    1-在元素停止抖动之前, 再次移入是无效的
    2-在鼠标移入的时候获取不在尝试修改元素的相同属性,
    比如元素的位置是使用 定位控制的,
    那么控制元素抖动的时候,使用margin来改变