同一個網頁中實現多個JavaScript特效的方法

2019-11-20 13:15:19

字體：大中小

來源：轉載

供稿：網友

本文實例講述了同一個網頁中實現多個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>