This article describes the method of implementing multiple JavaScript special effects in the same web page. Share it for your reference. The specific analysis is as follows:
Generally speaking, if the <script type="text/javascript"></script> tag appears twice, all JavaScript scripts will not take effect again, and only once <script type="text/javascript"></script> tags will appear. However, multiple JavaScript special effects are often needed in the same web page.
1. Basic Objectives
Mount two JavaScript clocks in the web page, one of which is the normal time that goes away every 1 second, and the other is an abnormal clock that goes away every 3 seconds. It is just to distinguish it and explain how to implement multiple JavaScript special effects in the same web page. The effect is shown in the figure below:
2. Production process
Method 1:
Copy the code as follows: <html>
<head>
<script type="text/javascript">
function clocka() {
var time = new Date().toLocaleString();
document.getElementById("clocka").innerHTML = time;
}
function a(){
clocka();
setInterval("clocka()", 1000);
}
function clockb() {
var time = new Date().toLocaleString();
document.getElementById("clockb").innerHTML = time;
}
function b(){
clockb();
setInterval("clockb()", 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 into a function, functions a(), b(), and then use the body's onLoad to load the web page and load this function immediately.
As for clocka() and clockb(), they are rewritten based on the original JavaScript code. The JavaScript code that was originally in <body> is as follows:
Copy the code as follows:<script type="text/javascript">
function clock() {
var time = new Date().toLocaleString();
document.getElementById("clock").innerHTML = time;
}
setInterval("clock()", 1000);
</script>
Method 2:
It means not writing type in <script>, but the type is written directly. 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 be bad.
However, the neatness and intuitiveness of the encoding are better than the above method.
The code is as follows:
Copy the code 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("clockb()", 3000);
</script>
<div id="clocka"></div>
<div id="clockb"></div>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.