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