JavaScript滚动条的制作

效果演示

 

这个效果的制作是借助setTimeout的第三个参数。setTimeout/setInterval，这两个函数相信前端开发同学都很熟悉。它们在非IE(6-9)浏览器中还可以如下使用：

view source

 

print?

1	setTimeout(function(obj){

2	alert(obj.a);

3	}, 2000, {a:1});

即传了第三个参数，第三个参数将作为回调函数的参数obj传入。在非IE浏览器中都弹出了1。这样有个好处，即解决了回调函数的执行上下文，比如要调用某个对象的某个方法，即可以通过参数把该对象传进去。

1	setTimeout(function(obj){

2	obj.method();

3	}, 2000, obj);

上次看到一个setTimeout的一个用法：

1	var arr = [1,9,2,8,3,7,4,6,4,5];

2	for(var i = 0, len = arr.length; i < len; i++){

3	setTimeout(function(x){

4	console.log(x);

5	},arr[i],arr[i]);

6

}

虽然这个并不是什么好的用法，这里setTimeout的第三个参数主要得到了除IE外的系列浏览器的支持。

要让IE支持的话，可以按下面方法进行扩展：

view source

 

print?

01	(function(w){

02	//ie传入第三个参数

03	if(!+[1,]){//除IE外，!+[1,]都是返回false

04	(function(overrideFn){

05	w.setTimeout = overrideFn(w.setTimeout);

06	w.setInterval = overrideFn(w.setInterval);

07	})(function(originalFn){

08	return function(code,delay){

09	var args = Array.prototype.slice.call(arguments,2);

10	return originalFn(function(){

11	if(typeof code == 'string'){

12	eval(code);

13

}else{

14	code.apply(this,args);

15

}

16

},delay);

17

}

18

})

19

}

20	})(window)

如果有第三个参数，某些情况下的调用就可以方便的处理回调函数中当前对象的问题，写起来好看点。扩展一下Function，增加一个延时调用（参考而已）：

01	function.prototype.delay = function(){

02	var args = Array.prototype.slice.call(arguments,0);

03	setTimeout(function(fn){

04	fn.apply('',args.slice(1));

05	},args[0],this);

06

}

07	var fn = function(x){

08

alert(x)

09

};

10	fn.delay(1000,'xesam');

下面是模拟进度条的代码：

view source

 

print?

01	<script type="text/javascript">

02	function Load(id,width){

03	this.ele = document.getElementById(id);

04	this.indicator = document.createElement('div');

05	this.width = (width > 0 && width) || 300;

06	this.init();

07

}

08	Load.prototype = {

09	constructor:Load,

10	init:function(){

11	this.ele.style.width = this.width + 'px';

12	this.ele.appendChild(this.indicator);

13	var iStyle = this.indicator.style;

14	iStyle.width = 0;

15	iStyle.height = '100%';

16	iStyle.background = '#ff5500';

17

},

18	start:function(){

19	//this.init();

20	this.loading();

21

},

22	loading:function(){

23	this.timer = setTimeout(function(obj){

24	var t = obj.indicator.data || 0;

25	if(t < obj.width){

26	obj.indicator.style.width = t + 1 +'px';

27	obj.indicator.data = t + 1;

28	obj.loading();

29

}else{

30	clearInterval(obj.timer);

31

}

32	},10,this);

33

},

34	stop:function(){

35	clearTimeout(this.timer);

36

}

37

}

38	var load_1 = new Load('loading',300);

39	load_1.start();

40

</script>