本文實例講述了同一個網頁中實現多個JavaScript特效的方法。分享給大家供大家參考。具體分析如下：
一般來說，在網頁中，如果出現兩次<script type="text/javascript"></script>標簽，所有的JavaScipt腳本都不會再生效，只能出現一次<script type="text/javascript"></script>標簽，但是，同一個網頁中常常需要多個JavaScript特效。
一、基本目標
在網頁中掛載兩個JavaScript時鐘，其中一個是每1秒走一次的正常時間，另外一個是每3秒才走一次的不正常時鐘，只是為了區分之後，來說明同一個網頁中如何實現多個JavaScript特效。效果如下圖所示：
二、制作過程
方法一：
復制代碼 代碼如下:<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代碼改寫過來的。原來處於<body>中那段JavaScript代碼如下：
復制代碼 代碼如下:<script type="text/javascript">
function clock() {
var time = new Date().toLocaleString();
document.getElementById("clock").innerHTML = time;
}
setInterval("clock()", 1000);
</script>
方法二：
就是在<script>不寫入type類型，直接寫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程序設計有所幫助。