Home >Web Front-end >JS Tutorial >How to implement multiple JavaScript effects in the same web page_javascript skills
How to implement multiple JavaScript effects in the same web page_javascript skills
- WBOYOriginal
- 2016-05-16 16:16:301549browse
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< script type="text/javascript"> 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:
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. </p>
<p>But the neatness and intuitiveness of coding completely beat the above method. </p>
<p>The code is as follows: </p>
<p></p>
<p></p>
<div class="codetitle"><span>Copy code<a style="CURSOR: pointer" data="91393" class="copybut" id="copybut91393" onclick="doCopy('code91393')"><u></u> The code is as follows:</a><div class="codebody" id="code91393"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br>
<html xmlns="http://www.w3.org/1999/xhtml"> <br>
<head> <br>
<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>