Javascript & DHTML Example Programming (Tutorial) (4) Elementary Example 2—Animation_Basic Knowledge

The previous article talked about examples of dynamically creating and deleting nodes. This article talks about how to use setInterval and setTimeout to make simple animations.
The syntax is window.setTimeout(fn, delay), window.setInterval(fn, delay)
fn can be a function name or an execution string, but it should be noted that if fn It is an executable string and has parameters. For example, window.setInterval("myFunction(obj)",1000) may throw an exception. At this time, you usually need to pass an object parameter. I recommend using this A way to solve it is also recommended to use window.setTimeout and window.setInterval using this method:

window.setInterval(function (){
myFunction(obj);},1000);

Another situation is that in a "class", how to implement this.myFunction(obj)?


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
};

DHTML’s global methods setInterval and setTimeout. The so-called global means that in the window layer, the methods of DOM elements that do not belong to DHTML. There are some differences between the two. There are also many explanations on the Internet, which is setInterval. It executes a specified function in a loop, and setTimeout is executed only once. As an exception, if it belongs to the window level, you can not add window in front, that is, you can use window.setInterval or directly use setInterval.

They all return a numeric timerId, used in the cleaverInterval/clearTimeout method, returned from setInterval/setTimeout. If you have done desktop applications, you can think of setInterval and setTimeout as creating a thread, and timerId is a thread ID, and the cleaverInterval/clearTimeout method destroys this thread. Maybe this can better understand these two methods.

(In specific applications, I prefer to use setTimeout.)

Knowing the functions of these two methods, let’s write a simple example first:

An alert dialog box pops up after one second.

<script> <br>window.setTimeout(function () { <br> alert("timeout example after 1 second"); <br>},1000) <br></script>

Function that creates a new DIV node every second
<script> <br>function intervalExample() { <br> var div=document.createElement("div"); <br> div.innerHTML = "tutorial of DHTML and javascript programming, by www.never-online.net"; <br> document.body.appendChild(div); <br>} <br>window.setInterval(intervalExample,1000); <br></script>

In actual applications, setTimeout can have an alternative application, such as the equivalent of the DoEvents function in VB, or Application.DoEvents(); in .net desktop programs. function, that is, asynchronous processing, because DHTML does not have multi-threading, so this function is often used to make users feel that they are not in a state of suspended animation, or to allow other programs to continue executing according to the logic of the code without blocking or A block of code execution will not be skipped.

Give me an example.

The following code does not add setTimeout. After running, the anchor point will immediately point to hash2

<script> <br>window.location.hash="hash1"; <br>window.location.hash="hash2"; <br>< /script> <br><br>This section is added with setTimeout. The anchor point will point to hash1 after 3 seconds, and then point to hash2 after 3 seconds. <br><script> <br>var doEventsDelay = 0; <br>function DoEvents (fn) { <br> window.setTimeout(fn,doEventsDelay); <br> doEventsDelay =3000; <br>} <br>DoEvents(function () { <br> window.location.hash=" hash1"; <br> doEventsDelay-=3000; <br>} <br>); <br>DoEvents(function () { <br> window.location.hash="hash2"; <br> doEventsDelay-=3000; <br> } <br>); <br></script>

Let’s make a more practical example, such as a dynamic menu that dynamically displays tips.

1. Here we only explain the setTimeout method. For setInterval, please see the code in the demo. Please also note one point (there is a serious problem in this example that has not been solved. I will leave this problem here. I’ll explain this later) is about coordinates. For example, if you put the sliderShow in the following code into a table, you may find some problems.:D

The idea is to get an element, mark it relative to this element, and then make an animation based on a tip container.
The main thing used is the X, Y coordinates of the relative element, about the coordinates For some attribute meanings, see the figure below:

As for the idea of ​​the entire animation, see the picture below

Comment code:

<title> Slider Show Demo - http://www.never-online.net </title> <meta http-equiv="ImageToolbar" content="no"> <style type="text/css" media="all" title="Default"> * { font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; margin:0; } body { font-size:10pt; text-align:center; } .sliderShowBox { border:1px solid #333; visibility:hidden; position:absolute; background-color:#eee; overflow:hidden; width:250px; text-align:left; } .sliderShowContent { padding:5px; } </style> <h1> </h1> Slider Show Demo <hr> <a href="###" onclick="javascript:effect_sliderShow(this,'sliderShowBox')"> </a>click show setTimeout demo<div class="sliderShowBox" id="sliderShowBox"> <div class="sliderShowContent"> </div> sliderShow tutorial of DHTML and javascript programming by never-online, never-online.net </div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]Do you think many of the above examples are duplicates? labor? Wouldn’t it be better if there were fewer? :D, indeed, nearly half of the above JS code is duplicated. I will not optimize it here, but leave it to you to do some substantive work to reduce the redundancy of the above code.​