首頁 > 開發者 > 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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
