Use four symbols (-, \, |,/) to simulate continuous rotation.

Source: Internet
Author: User

A simple loading effect. Four symbols (-, \, |,/) are used to simulate a continuously rotating dashboard, prompting the user that the current loading is in progress, this is what arclive shows when establishing connections for players. The effect is as follows:

Loading ...\

JavaScript code:

View Source print?
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>

To avoid possible blocking of browser threads, setTimeout is used instead of setinterval.

It reminds us of the kind of QBASIC and Foxbase in DOS. :) metropolitan entertainment city

SetTimeout () Usage

SetTimeout (expression, delay time), setTimeout (expression, interaction time), delay time/interaction time is in the unit of haoss (1000 ms = 1 s ).

When setTimeout is executed, the expression is executed only once after the specified time delay after loading. When setTimeout is executed, it executes the expression once every specified time after loading.

The basic usage is as follows.

Run a piece of code:

View Source print?
1 var i=0;
2 setTimeout("i+=1;alert(i)",1000);

Execute a function:

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

Next, let's execute another function:

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

The prototype of setTimeout is as follows: itimerid = Window. setTimeout (vcode, imilliseconds [, slanguage])

Use setTimeout to implement the setinterval Function

The idea is simple, that is, a function that calls itself without stopping execution is a bit like recursion.

View Source print?
1 var i=0;
2 function xilou(){
3     i+=1;
4     if(i>10){alert(i);return;}
5     setTimeout("xilou()",1000);
6     // You can also use this
7     //setTimeout(xilou,1000);
8 }

Use four symbols (-, \, |,/) to simulate continuous rotation.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.