DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 同一個網頁中實現多個JavaScript特效的方法教程
同一個網頁中實現多個JavaScript特效的方法教程
編輯:關於JavaScript     

本文實例講述了同一個網頁中實現多個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程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved