Home > Developer > Web Develop
[JavaScript] implements multiple JavaScript special effects and javascript special effects on the same webpage.
If the <script type = "text/javascript"> </script> label appears twice on the webpage, all the 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.
Ii. Production Process
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:
<script type="text/javascript">function clock() {var time = new Date().toLocaleString();document.getElementById("clock").innerHTML = time;}setInterval("clock()", 1000);</script>
Helping to create a webpage: using Javascript to implement a webpage such as webpage special effects is our final big job,Already released. Check.
Two javascript image switching effects conflict on the same pageNot only does the id name need to be different, but also the Defined variables need to be different, such as var widths. Otherwise, if it repeats, it does not know which parameter to call.
I changed it for you and it was tested to be available.
***********************
Note: replace all the Chinese quotation marks in the following code with the English format
***********************
<Script language = "javascript" type = "text/javascript">
Var widths = 310;
Var heights = 310;
Var counts = 3;
Img1 = new Image (); img1.src = 'images/index_img/0001.jpg ';
Img2 = new Image (); img2.src = 'images/index_img/0002.jpg ';
Img3 = new Image (); img3.src = 'images/index_img/0003.jpg ';
Url1 = new Image (); url1.src = 'www .webjx.com ';
Url2 = new Image (); url2.src = 'www .webjx.com ';
Url3 = new Image (); url3.src = 'www .webjx.com ';
Var nn = 1;
Var key = 0;
Function change_img ()
{If (key = 0)
{Key = 1 ;}
Else if (document. all)
{Document. getElementById ("pic"). filters [0]. Apply (); document. getElementById ("pic"). filters [0]. Play (duration = 2 );
}
Eval ('document. getElementById ("pic"). src = img '+ nn + '. src '); eval ('document. getElementById ("url"). href = url '+ nn + '. src ');
For (var I = 1; I <= counts; I ++) {document. getElementById ("xxjdjj" + I). className = 'axx ';
}
Document. getElementById ("xxjdjj" + nn). className = 'bxx ';
Nn ++;
If (nn> counts) {nn = 1 ;}
Tt = setTimeout ('change _ img () ', 5000 );}
Function changeimg (ks) ...... remaining full text>
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
