How to implement multiple JavaScript effects in the same web page_javascript skills

The example in this article describes how to implement multiple JavaScript effects in the same web page. Share it with everyone for your reference. The specific analysis is as follows:

Generally speaking, if the tag appears twice on a web page, all JavaScript scripts will no longer take effect and can only appear once tag, however, multiple JavaScript effects are often needed in the same web page.

1. Basic goals

Mount two JavaScript clocks in the web page, one of which is a normal time that runs once every 1 second, and the other is an abnormal clock that only runs once every 3 seconds, just to distinguish and illustrate the same web page. How to implement multiple JavaScript effects. The effect is as shown below:

2. Production process

Method 1:

Copy code The code is as follows:

First write the special effect to be implemented into a function, functions a(), b(), and then use the onLoad of the body to load this function immediately after loading the web page. As for clocka() and clockb(), they are rewritten based on the original JavaScript code. The original JavaScript code in is as follows:

Copy code The code is as follows:

function clock() {

var time = new Date().toLocaleString();
Document.getElementById("clock").innerHTML = time;
}
setInterval("clock()", 1000);

Method 2:

Just write type directly in <script> instead of writing type. However, this method has a certain delay. The special effects are loaded one by one. If there are too many special effects, the effect will not be good. </script>

But the neatness and intuitiveness of coding completely beat the above method.

The code is as follows:

Copy code The code is as follows:

 
 
 
<script>  <br /> function clocka() {  <br />             var time = new Date().toLocaleString();  <br />             document.getElementById("clocka").innerHTML = time;  <br />         }  <br /> function clockb() {  <br />             var time = new Date().toLocaleString();  <br />             document.getElementById("clockb").innerHTML = time;  <br />         }     <br /> </script> 
 
 
 
 
 
<script>  <br /> setInterval("clocka()", 1000);  <br /> </script> 
<script>  <br /> setInterval("clockb()", 3000);  <br /> </script> 

 

 
 

希望本文所述对大家的javascript程序设计有所帮助。