快捷導(dǎo)航

同一個(gè)網(wǎng)頁(yè)中實(shí)現(xiàn)多個(gè)JavaScript特效的方法

更新時(shí)間：2015年02月02日 10:31:14 作者：yongh701

這篇文章主要介紹了同一個(gè)網(wǎng)頁(yè)中實(shí)現(xiàn)多個(gè)JavaScript特效的方法,實(shí)例分析了多個(gè)特效的實(shí)現(xiàn)原理與相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了同一個(gè)網(wǎng)頁(yè)中實(shí)現(xiàn)多個(gè)JavaScript特效的方法。分享給大家供大家參考。具體分析如下：

一般來(lái)說(shuō)，在網(wǎng)頁(yè)中，如果出現(xiàn)兩次<script type="text/javascript"></script>標(biāo)簽，所有的JavaScipt腳本都不會(huì)再生效，只能出現(xiàn)一次<script type="text/javascript"></script>標(biāo)簽，但是，同一個(gè)網(wǎng)頁(yè)中常常需要多個(gè)JavaScript特效。

一、基本目標(biāo)

在網(wǎng)頁(yè)中掛載兩個(gè)JavaScript時(shí)鐘，其中一個(gè)是每1秒走一次的正常時(shí)間，另外一個(gè)是每3秒才走一次的不正常時(shí)鐘，只是為了區(qū)分之后，來(lái)說(shuō)明同一個(gè)網(wǎng)頁(yè)中如何實(shí)現(xiàn)多個(gè)JavaScript特效。效果如下圖所示：

二、制作過(guò)程

方法一：

復(fù)制代碼代碼如下:

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

先把要實(shí)現(xiàn)的那段特效的寫(xiě)到一個(gè)函數(shù)里，函數(shù)a(),b()，再通過(guò)body的onLoad，讓其加載網(wǎng)頁(yè)就馬上去載入這段函數(shù)。
至于clocka()與clockb()，是根據(jù)原來(lái)的JavaScript代碼改寫(xiě)過(guò)來(lái)的。原來(lái)處于<body>中那段JavaScript代碼如下：

復(fù)制代碼代碼如下:

<script type="text/javascript">  

function clock() {  

    var time = new Date().toLocaleString();  

    document.getElementById("clock").innerHTML = time;  

}  

setInterval("clock()", 1000);  

</script>

方法二：

就是在<script>不寫(xiě)入type類型，直接寫(xiě)type，不過(guò)這種方法有一定的延遲性，特效是一個(gè)一個(gè)加載的，如果太多特效的話，效果會(huì)不好。

但是編碼的整潔性與直觀性，完勝上面的方法。

代碼如下：

復(fù)制代碼代碼如下:

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