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" > |
03 |
function easy_loading(id) |
05 |
var symbol = [ ‘-‘ , ‘\\‘ , ‘|‘ , ‘/‘ ], |
06 |
elem = document.getElementById(id), |
09 |
elem.innerHTML = symbol[i++ % 4]; |
10 |
setTimeout(__func, 200); |
13 |
easy_loading( ‘loadin‘ ); |
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?
2 |
setTimeout( "i+=1;alert(i)" ,1000); |
Execute a function:
View Source print?
2 |
setTimeout( function (){i+=1;alert(i);},1000); |
Next, let's execute another function:
View Source print?
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?
4 |
if (i>10){alert(i); return ;} |
5 |
setTimeout( "xilou()" ,1000); |
6 |
// You can also use this |
7 |
//setTimeout(xilou,1000); |
Use four symbols (-, \, |,/) to simulate continuous rotation.