简明现代魔法 -> web设计理念 -> 一个用js代码生成的Loading效果

一个用js代码生成的Loading效果

2011-04-03

一个简单的loading效果,用四个符号(-、\、|、/) 来模拟一个不断旋转的小东东,以提示用户当前正在载入中,ArcLive 上为玩家建立连线时便是这样显示的,呵呵。效果如下:

载入中...  

JavaScript Code:

<script type="text/javascript">
// <![CDATA[

function easy_loading(id) 
{
	var symbol = ['-', '\\', '|', '/'], 
		elem = document.getElementById(id),
		i = 0;

	(function __func() {
		elem.innerHTML = symbol[i++ % 4];
		setTimeout(__func, 200);
	})();
}

easy_loading('loadin');

// ]]>
</script>

为了避免可能出现的阻塞浏览器线程的情况,这里用setTimeout 代替了setInterval。

让人想起了DOS下QBasic和FoxBase那种远去的亲切吧 :)

setTimeout()的使用方法

setTimeout (表达式,延时时间)、setTimeout(表达式,交互时间),延时时间/交互时间是以豪秒为单位的(1000ms=1s)。

setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次。setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式。

下面是基本用法。

执行一段代码:

var i=0;
setTimeout("i+=1;alert(i)",1000);

执行一个函数:

var i=0;
setTimeout(function(){i+=1;alert(i);},1000);

下面再来一个执行函数的:

	var i=0;
   function test(){
       i+=1;
       alert(i);
   }
   setTimeout("test()",1000);

setTimeout的原型是这样的:iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])

用setTimeout实现setInterval的功能

思路很简单,就是在一个函数中调用不停执行自己,有点像递归。

	var i=0;
    function xilou(){
        i+=1;
        if(i>10){alert(i);return;}
        setTimeout("xilou()",1000);
        //用这个也可以
        //setTimeout(xilou,1000);
    }
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们