Home > Developer > JavaScript
Methods for implementing multiple JavaScript special effects on the same webpage, javascript Special Effects
This example describes how to implement multiple JavaScript effects on the same webpage. Share it with you for your reference. The specific analysis is as follows:
In general, if the <script type = "text/javascript"> </script> label appears twice on a webpage, all JavaScipt scripts will no longer take effect, the <script type = "text/javascript"> </script> label can only appear once. However, multiple JavaScript effects are often required for the same webpage.
I. Basic Objectives
Mount two JavaScript clocks on the webpage, one of which is the normal time every 1 second, and the other is the abnormal clock that every 3 seconds, just to distinguish, to illustrate how to implement multiple JavaScript effects on the same web page. Shows the effect:
Ii. Production Process
Method 1:
Copy codeThe Code is as follows: <Head>
<Script type = "text/javascript">
Function clocka (){
Var time = new Date (). toLocaleString ();
Document. getElementById ("clocka"). innerHTML = time;
}
Function (){
Clocka ();
SetInterval ("clocka ()", 1000 );
}
Function clockb (){
Var time = new Date (). toLocaleString ();
Document. getElementById ("clockb"). innerHTML = time;
}
Function B (){
Clockb ();
SetInterval ("clckb ()", 3000 );
}
</Script>
</Head>
<Body onLoad = "a (), B ()">
<Div id = "clocka"> </div>
<Div id = "clockb"> </div>
</Body>
</Html>
First, write the special effect to be implemented to a function, function a (), function B (), and then load the function immediately after loading the webpage through the onLoad of the body.
Clocka () and clockb () are rewritten based on the original JavaScript code. The original JavaScript code in <body> is as follows:
Copy codeThe Code is as follows: <script type = "text/javascript">
Function clock (){
Var time = new Date (). toLocaleString ();
Document. getElementById ("clock"). innerHTML = time;
}
SetInterval ("clock ()", 1000 );
</Script>
Method 2:
In <script>, the type is not written, but the type is directly written. However, this method has a certain degree of delay. The special effects are loaded one by one. If there are too many special effects, the effect will be poor.
However, the conciseness and intuition of the encoding method outweighs the above method.
The Code is as follows:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Script>
Function clocka (){
Var time = new Date (). toLocaleString ();
Document. getElementById ("clocka"). innerHTML = time;
}
Function clockb (){
Var time = new Date (). toLocaleString ();
Document. getElementById ("clockb"). innerHTML = time;
}
</Script>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> twojs </title>
</Head>
<Body>
<Script>
SetInterval ("clocka ()", 1000 );
</Script>
<Script>
SetInterval ("clckb ()", 3000 );
</Script>
<Div id = "clocka"> </div>
<Div id = "clockb"> </div>
</Body>
</Html>
I hope this article will help you design javascript programs.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
