码迷,mamicode.com
首页 > 其他好文 > 详细

用四个符号(-、\、|、/) 来模拟不断旋转

时间:2014-10-09 14:51:03      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   os   使用   ar   java   sp   div   

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

载入中... \

JavaScript Code:

01 <script type="text/javascript">
02 // <![CDATA[
03 function easy_loading(id)
04 {
05     var symbol = [‘-‘, ‘\\‘, ‘|‘, ‘/‘],
06         elem = document.getElementById(id),
07         i = 0;
08     (function __func() {
09         elem.innerHTML = symbol[i++ % 4];
10         setTimeout(__func, 200);
11     })();
12 }
13 easy_loading(‘loadin‘);
14 // ]]>
15 </script>

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

让人想起了DOS下QBasic和FoxBase那种远去的亲切吧 :)大都会娱乐城

setTimeout()的使用方法

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

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

下面是基本用法。

执行一段代码:

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

执行一个函数:

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

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

1 var i=0;
2 function test(){
3     i+=1;
4     alert(i);
5 }
6 setTimeout("test()",1000);

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

用setTimeout实现setInterval的功能

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

1 var i=0;
2 function xilou(){
3     i+=1;
4     if(i>10){alert(i);return;}
5     setTimeout("xilou()",1000);
6     //用这个也可以
7     //setTimeout(xilou,1000);
8 }

用四个符号(-、\、|、/) 来模拟不断旋转

标签:style   http   io   os   使用   ar   java   sp   div   

原文地址:http://www.cnblogs.com/xiaoyang002/p/4012640.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!