同一个网页中实现多个JavaScript特效的方法

本文通过具体实例，详细解析在同一网页中部署多个JavaScript特效的实现方案，旨在为开发者提供实用的参考与借鉴。

通常情况下，网页中若出现多个<script type="text/javascript">标签，可能导致脚本失效，因此建议仅保留一个此类标签。然而，实际开发中往往需要在同一页面内运行多种JavaScript特效，这就需要特定的处理技巧。

基本目标

一、基本目标

本例旨在网页中挂载两个JavaScript时钟：一个为每秒刷新一次的正常时钟，另一个为每3秒刷新一次的非标准时钟。通过对比两者运行状态，直观展示同一页面内多特效共存的实现方式，具体效果见下图。

制作过程

二、制作过程

方法一：

<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>

首先将所需特效封装在函数a()和b()中，随后通过body的onLoad属性，在网页加载时立即执行这两个函数。其中，clocka()与clockb()是对原有JavaScript代码的改写版本。原有的单时钟JavaScript代码如下：

<script type="text/javascript">
function clock() {
var time = new Date().toLocaleString();
document.getElementById("clock").innerHTML = time;
}  
setInterval("clock()", 1000);
</script>

方法二

方法二：

该方法在<script>标签中省略type属性，直接书写脚本。虽然这种方式存在一定延迟，且特效按顺序逐个加载，若特效数量过多可能影响性能，但其编码整洁性和直观性优于上述方法。

但是编码的整洁性与直观性，完胜上面的方法。

代码如下：

<!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>

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