MozTW 討論區 • 檢視主題 - Firefox 3.0.3 在執行Javascript的setTimeout時出現以下問題...

所有顯示的時間為 UTC + 8 小時

Firefox 3.0.3 在執行Javascript的setTimeout時出現以下問題...

第 1 頁 (共 1 頁)

[ 7 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

kaneintku

文章主題 : Firefox 3.0.3 在執行Javascript的setTimeout時出現以下問題...

發表於 : 2008-10-02, 23:55

註冊時間: 2008-10-02, 19:00
文章: 2
來自: Taiwan

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<title>淡入及淡出</title>
<style type="text/css">
#fade{
   opacity:1;
   filter: alpha(opacity=100);
}
</style>
<script type="text/javascript">
addLoadListener(init);

function addLoadListener(fn){
    window.onload = fn;
}

function init(){
   img = document.getElementById("fade");
   
   if(typeof img.style.opacity != "undefined"){
      browser = "firefox";
      img.style.opacity = 1;
   }else if(typeof img.filters.alpha.opacity == "number"){
      browser = "ie";
      //img.filters.alpha.opacity = 100;
   }
   
   fadeout();
}

function fadeout(){
   if(img.style.opacity > 0){
      img.style.opacity -= 0.1;
      setTimeout('fadeout()', 100);
   }else if(img.style.opacity == 0){
      fadein();
   }
/*
   if(img.filters.alpha.opacity > 0){
      img.filters.alpha.opacity -= 10;
      setTimeout('fadeout()', 100);
   }else if(img.filters.alpha.opacity == 0){
      fadein();
   }
*/
}

function fadein(){   
   if(img.style.opacity < 1){
      img.style.opacity += 0.1;
      setTimeout('fadein()', 100);
   }
/*
   if(img.filters.alpha.opacity < 100){
      img.filters.alpha.opacity += 10;
      setTimeout('fadein()', 100);
   }
*/
}
</script>
</head>
<body>
<img src="img10.bmp" id="fade">
<div id="output"></div>
</body>
</html>

這個網頁原本是要拿來設計成，
1.先判斷使用者是用何種瀏覽器，
2.再依據IE或FF執行所屬的程式碼
3.先將圖片img10.bmp淡出之後再淡入

但用FF跑這個程式碼時，
只跑到function fadein()的img.style.opacity += 0.1;這一行，
下一行的setTimeout卻無法執行。

若將註解區的程式碼反註解(註解區的程式碼是給IE跑的)，
再用IE跑卻OK。(我是用IE 6.0)

我想問的是在FF環璄下，
是不是function fadein()裡的setTimeout中的函式參數不是這樣子寫的?

因為我若將該行改為setTimeout(function(){alert("abc");}, 100)，
此時FF跑卻又OK，
所以在猜想是不是fadein()的setTimeout參數表示式不對。

煩各位先進幫忙!

最後由 kaneintku 於 2008-10-03, 14:31 編輯，總共編輯了 1 次。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

kourge

文章主題 :

發表於 : 2008-10-03, 07:54

[網站管理員]

註冊時間: 2004-09-27, 09:24
文章: 1685

改成 setTimeout(arguments.callee, 100); 看看。
（如果真的要做一堆特效，jQuery 就堪用。）

_________________
korp + korp 中文站（沒精神更新）

回頂端

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; zh-TW; rv:1.9.0.3) Gecko/2008092414 Firefox/3.0.3

kaneintku

文章主題 :

發表於 : 2008-10-03, 14:29

註冊時間: 2008-10-02, 19:00
文章: 2
來自: Taiwan

kourge 寫:

改成 setTimeout(arguments.callee, 100); 看看。
（如果真的要做一堆特效，jQuery 就堪用。）

還是不行耶~
一樣function fadeout的特效有出來，
但function fadein卻沒有...

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

shyangs

文章主題 :

發表於 : 2008-10-03, 18:13

[網站管理員]

註冊時間: 2006-11-22, 16:07
文章: 560

你在 function fadein(){}，加入 alert(img.style.opacity); 觀察看看。img.style.opacity這個值一直沒有增加，總是滿足你設定的 if 條件，會無窮地一直跑初始值= =a

事實上，我遞迴觀念很弱，幫回覆一下，看能不能吸引高手來討論。

以下是我的修改

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<title>淡入及淡出</title>
<style type="text/css">
#fade{
   opacity:1;
   filter: alpha(opacity=100);
}
</style>
<script type="text/javascript">
addLoadListener(init);


function addLoadListener(fn)
{
    window.onload = fn;
}

function init()
{
   img = document.getElementById("fade");
   
   if(typeof img.style.opacity != "undefined")
   {
      browser = "firefox";
      img.style.opacity = 1;
   }
   else if(typeof img.filters.alpha.opacity == "number")
   {
      browser = "ie";
   }

   fadeout();
}

function fadeout()
{
   if(img.style.opacity > 0)
   {
      img.style.opacity -= 0.1;
      setTimeout(fadeout, 100);
   }
   else if(img.style.opacity == 0)
   {
      op=parseFloat(img.style.opacity);
      fadein();
   }
}

function fadein()
{
   if(op > 1)
   {
   return;
   }
   op += 0.1;
   img.style.opacity = op;
   //alert(img.style.opacity);
   setTimeout("fadein()", 100);//setTimeout(fadein, 100);
}
</script>
</head>
<body>
<img src="img10.bmp" id="fade">
<div id="output"></div>
</body>
</html> 

setTimeout("fadein()", 100);若寫成setTimeout(fadein, 100);會有不同的效果，不知道為什麼(倒)

_________________

個人設定檔從 2006/04/21 撐到現在，超過八年，備份還原，解決一切問題的大招之一。
- 沒有備份的話，試試可攜版吧。（請不要放在中文目錄底下！）
使用 AMO 審核過的套件比來路不明的腳本安全。惡意腳本案例：淘宝加加、专用链破解
【小程式】刪除用不著的 Fx 套件語系 (0.7 版發佈)
PDFCreator 內含木馬工具列！

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

yuoo2k

文章主題 :

發表於 : 2008-10-03, 23:56

註冊時間: 2005-08-25, 19:59
文章: 1210
來自: 幻境地帶

把 init() 改成下面這樣, 會發現很有趣的現象...

代碼:

function init(){
   img = document.getElementById("fade");
   img.style.opacity = 0.5;

   var x = img.style.opacity;
   alert("x=" + x + ", typeof(x)=" + typeof(x));

   var a = img.style.opacity - 0.1;
   alert("a=" + a);

   var b = img.style.opacity + 0.1;
   alert("b=" + b);
}

IE的輸出結果:

代碼:

x=0.5, typeof(x)=number

a=0.4

b=0.6

Firefox的輸出結果:

代碼:

x=0.5, typeof(x)=string

a=0.4

b=0.50.1

怎麼會這樣??

開 Tools -> Error Console 出來執行看看下列算式:

代碼:

"0.5"-0.1 答案是 0.4
"0.5"+0.1 答案是 "0.50.1"

所以問題是... 為何 Firefox 會把 img.style.opacity 視為 String ??

感覺是個 Bug ...

_________________
Add Bookmark Here ² | Charset Switcher | Hide Menubar | MClickFocusTab | Personal Titlebar

回頂端

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Zorro

文章主題 :

發表於 : 2008-10-04, 00:27

代碼:

   if(img.style.opacity < 1){
      img.style.opacity += 0.1;
      setTimeout('fadein()', 100);
   } 

改成

代碼:

   if(img.style.opacity < 1){
      img.style.opacity -= 0 - 0.1;
      setTimeout('fadein()', 100);
   } 

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

alex301

文章主題 :

發表於 : 2008-10-04, 02:08

註冊時間: 2005-02-16, 11:07
文章: 575

建議改用非遞迴的寫法...

代碼:

function init(){
   img = document.getElementById("fade");
   if(typeof img.style.opacity != "undefined"){
      browser = "fx";
      img.style.opacity = 1;
   }else if(typeof img.filters.alpha.opacity == "number"){
      browser = "ie";
      img.filters.alpha.opacity = 100;
   }

   setTimeout(fadeout, 0);
   setTimeout(fadein, 1000);
}

function setOpacity(value) {
   if (browser == "fx") img.style.opacity = value/10;
   if (browser == "ie") img.filters.alpha.opacity = value*10;
}

function fadeout(){
   for (var i=0; i<=10; i++)
      setTimeout('setOpacity('+(10-i)+')', 100*i);
}

function fadein(){
   for (var i=0; i<=10; i++)
      setTimeout('setOpacity('+i+')', 100*i);
}

回頂端

Mozilla/5.0 (Windows; U; Windows NT 6.0; zh-TW; rv:1.9) Gecko/2008052906 Firefox/3.0

第 1 頁 (共 1 頁)

[ 7 篇文章 ]

MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時

誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員和 2 位訪客

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案

前往 :