Javascript DHTML instance programming (Tutorial) (4) Example 2-Animation

The previous section describes how to use setinterval and setTimeout to create and delete nodes dynamically.
Syntax: window. setTimeout (FN, delay), window. setinterval (FN, delay)
FN can be a function name or execution string, but note that if FN is a executable string with parameters, such as window. setinterval ("myfunction (OBJ)", 1000) may throw an exception. In this case, you usually need to pass an object parameter. I suggest using this solution, we recommend that you use window. setTimeout and window. setinterval:

Window. setinterval (function (){
Myfunction (OBJ);}, 1000 );

Another case is how to implement this. myfunction (OBJ) in a "class?

Function jsclass (){};
Jsclass. Prototype. init = function (OBJ ){
VaR self = This; // create a reference to this pointer
Window. setinterval (function (OBJ ){
Self. myfunction (OBJ);}, 1000 );
};
Jsclass. Prototype. myfunction = function (OBJ ){
// Todo
};

The global methods setinterval and setTimeout of DHTML are called Global. In the window layer, these two methods are different from the DOM elements of DHTML, that is, setinterval is used to execute a specified function cyclically, and setTimeout is executed only once. The exception is that it belongs to the window level. You can use window. setinterval or setinterval without adding a window.

They all return a digital timerid, which is used in the cleaverinterval/cleartimeout method and returned from setinterval/setTimeout. If you have worked as a desktop application friend, you can imagine the setinterval and setTimeout as creating a thread, while the timerid is a thread ID, and the cleaverinterval/cleartimeout method is to destroy this thread. Maybe we can better understand these two methods.

(In specific applications, I prefer setTimeout .)

To understand the functions of these two methods, first write a simple example:

The alert dialog box pops up one second later.

<SCRIPT>
Window. setTimeout (function (){
Alert ("timeout example after 1 second ");
}, 1000)
</SCRIPT>

Create a new Div node function every second
<SCRIPT>
Function intervalexample (){
VaR DIV = Document. createelement ("Div ");
Div. innerhtml = "tutorial of DHTML and JavaScript programming by www.never-online.net ";
Document. Body. appendchild (DIV );
}
Window. setinterval (intervalexample, 1000 );
</SCRIPT>

In practical applications, setTimeout can have an alternative application, such as the doevents function in VB or. NET DesktopProgramApplication. doevents (); this function is asynchronous processing. Because DHTML does not have multiple threads, this function is often used to make users feel that it is not in a false state, or to other programs accordingCodeAnd does not block or skip code execution.

For example.

The following code does not contain setTimeout. After running, the anchor points to hash2 immediately.

<SCRIPT>
Window. Location. Hash = "hash1 ";
Window. Location. Hash = "hash2 ";
</SCRIPT>

This section is added with setTimeout. The anchor points to hash1 in 3 seconds and hash2 in 3 seconds.
<SCRIPT>
VaR doeventsdelay = 0;
Function doevents (FN ){
Window. setTimeout (FN, doeventsdelay );
Doeventsdelay + = 3000;
}
Doevents (function (){
Window. Location. Hash = "hash1 ";
Doeventsdelay-= 3000;
}
);
Doevents (function (){
Window. Location. Hash = "hash2 ";
Doeventsdelay-= 3000;
}
);
</SCRIPT>

Below is a practical example, for example, a dynamic menu that dynamically displays the tip.

1. Here we will only explain the setTimeout method. For the setinterval method, please refer to the Code in the demo and note that (a serious problem in this example is not solved, I will explain this question later.) It's about coordinates. For example, if you put the slidershow in the following code into a table, you may find some problems. : D

Train of Thought, get an element, mark this element, and then make an animation based on a tip container,
It mainly uses the X and Y coordinates of the relative elements. For the attribute meanings of coordinates, see:

For the whole idea of animation, see

Annotation code:

<textarea id="runcode90336"></textarea> Xmlns = "http://www.w3.org/1999/xhtml">

Slider show demo

Click Show setTimeout demo

Slidershow
Tutorial of DHTML and JavaScript programming
By never-Online, never-online.net