javascript 程式

本帖最後由 fredayeung 於 2015-7-25 22:35 編輯

我個 javascript 可以 run 到無問題, 但係當用IE 時, 初時會無問題, 但玩得耐會彈出 IE 已經停止運作, 網頁沒有回應等, 但響Chrome時, 就無呢個問題, 大家有無試過響 IE 到 execute 時會停止, 但唔知咩問題, 因為如果係個程式有問題, chrome 就唔會無事, 而且用 IE 時, 都是有時有事有時無事, 不過玩耐左就停止運作!

IE咩version先
如果IE8唔出奇喎, js超慢

TOP

回覆 2# KinChungE


    IE10 同 IE11 都一樣有問題, 各位唔知有無解決方法?

TOP

完全冇 details, 點討論

不過提提你,for loop while loop 內最好唔好搞到 dom / ui, 你 loop 完計完數/砌好條 string / instruction 之後先在出面 apply to dom /ui
必要時使用 setTimeout instead of loop
IE 對頻繁既 dom modification 係差啲

TOP

冇code好難估咩事

TOP

<!DOCTYPE html>
<html>
<head>
<style>

#th1,#td1 {
   display: inline;
   padding: 2.5px;
  
   }       
#th2,#td2 {
    display: inline;
    padding: 7px;
        }


#section1 {
   position: absolute;
   left:20px;
   top:150px;
   width: 600px;
   height: 320px;
   background: #EFC089;
   border-radius: 20px;
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   border: 0px;
           }

#section2 {
   position: absolute;
   left:20px;
   top:485px;
   width: 600px;
   height: 130px;
   background: #D3EFA3;
   border-radius: 20px;
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   border: 0px;
   
}
   
#table1
{   position: absolute;
    left: 22px;
    top: 7px;
}
#table2
{   position: absolute;
    left: 22px;
    top: 10px;
}
#displayDian
{  position: absolute;
   left:695px;
   top: 180px;
   width: 60px;
   height: 160px;
   background-color: transparent;
   border-radius: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
    border-width: 3px;
    border-style:solid;       
        border-color: #FFFF3E;
    display: table;
         }
         
#displayDianSub
{  
  vertical-align: middle;
  display: table-cell;
                  }         
         

#displayEng01 {
position: absolute;
   left:655px;
   top:360px;
   width: 105px;
   height: 50px;
   background-color: transparent;
   border-radius: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
    border-width: 3px;
    border-style:solid;       
        border-color: #0A50FF;
        display: table;
}
#displayEng01Sub
{  
  vertical-align: middle;
  display: table-cell;
                  }         

#displayEng02 {
position: absolute;
   left:655px;
   top:360px;
   width: 105px;
   height: 50px;
   background-color: transparent;
   border-radius: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   border-width: 3px;
    border-style:solid;       
        border-color: #0A50FF;
    display: table;
}
#displayEng02Sub
{  
  vertical-align: middle;
  display: table-cell;
                  }         

#displayWord {
   position: absolute;
   left:655px;
   top:430px;
   width: 105px;
   height: 46px;
   background-color: transparent;
   border-radius: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
    border-width: 3px;
    border-style:solid;       
        border-color: #0A50FF;
    display: table;  
        }
#displayWordSub {
   vertical-align: middle;
   display: table-cell;
}

#arrow {
   position: absolute;
   left:635px;
   top:220px;
}
#combine {
   position: absolute;
   left:655px;
   top:500px;
}
#repeat {
   position: absolute;
   left:715px;
   top:500px;
}
#balloon {
   position: absolute;
   left:808px;
   top:278px;
}
#outSound {
position: absolute;
left:630px;
top:590px;
height:2px;
width:2px;

}
#tdSmEng,#tdYmEng {
vertical-align: bottom;

}
#dianImage{
vertical-align: top;
}


</style>
</head>
<body bgcolor="4BCDDB" scroll="yes">
<img src="banner.png">
<div id="section1" >
<table id="table1" border=0 width="570" height="300">

<tr><th id="th1"><font size="5" face="標楷體"><b>聲母</b></font></th></tr>

<tr><td id="td1" width="50"><img src="smBut0.png" onClick="selectYm(0)"></td>
<td id="td1"><img src="smBut1.png" onClick="selectYm(1)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(2)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(3)"></td>
<td id="td1"><img src="smBut4.png" onClick="selectYm(4)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(5)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(6)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(7)"></td>
<td id="td1"><img src="smBut8.png" onClick="selectYm(8)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(9)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(10)"></td>
<td id="td1"><img src="smBut11.png" onClick="selectYm(11)"></td>
<td id="td1"><img src="smBut12.png" onClick="selectYm(12)"></td></tr>
<tr><td id="td1"><img src="button_sm.png" onClick="selectYm(13)"></td>
<td id="td1"><img src="smBut14.png" onClick="selectYm(14)"></td>
<td id="td1"><img src="button_2char.png" onClick="selectYm(15)"></td>
<td id="td1"><img src="button_2char.png" onClick="selectYm(16)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(17)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(18)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(19)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(20)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(21)"></td>
<td id="td1"><img src="button_sm.png" onClick="selectYm(22)"></td>
</tr>
<tr><th id="th1"><font size="5" face="標楷體"><b>韻母</b></font></th></tr>
<tr><td id="td1"><span id="ym0"><img src="ymBut0.png"></span></td>
<td id="td1"><span id="ym1"><img src="ymBut1.png"></span></td>
<td id="td1"><span id="ym2"><img src="ymBut2.png"></span></td>
<td id="td1"><span id="ym3"><img src="ymBut3.png"></span></td>
<td id="td1"><span id="ym4"><img src="ymBut4.png"></span></td>
<td id="td1"><span id="ym5"><img src="ymBut5.png"></span></td>
<td id="td1"><span id="ym6"><img src="ymBut6.png"></span></td>
<td id="td1"><span id="ym7"><img src="ymBut7.png"></span></td>
<td id="td1"><span id="ym8"><img src="ymBut8.png"></span></td>
<td id="td1"><span id="ym9"><img src="ymBut9.png"></span></td>
<td id="td1"><span id="ym10"><img src="ymBut10.png"></span></td>
</tr>
<tr>
<td id="td1"><span id="ym11"><img src="ymBut11.png"></span></td>
<td id="td1"><span id="ym12"><img src="ymBut12.png"></span></td>
<td id="td1"><span id="ym13"><img src="ymBut13.png"></span></td>
<td id="td1"><span id="ym14"><img src="ymBut14.png"></span></td>
<td id="td1"><span id="ym15"><img src="ymBut15.png"></span></td>
<td id="td1"><span id="ym16"><img src="ymBut16.png"></span></td>
<td id="td1"><span id="ym17"><img src="ymBut17.png"></span></td>
<td id="td1"><span id="ym18"><img src="ymBut18.png"></span></td>
<td id="td1"><span id="ym19"><img src="ymBut19.png"></span></td>
<td id="td1"><span id="ym20"><img src="ymBut20.png"></span></td>
</tr>
<td id="td1"><span id="ym21"><img src="ymBut21.png"></span></td>
<td id="td1"><span id="ym22"><img src="ymBut22.png"></span></td>
<td id="td1"><span id="ym23"><img src="ymBut23.png"></span></td>
<td id="td1"><span id="ym24"><img src="ymBut24.png"></span></td>
<td id="td1"><span id="ym25"><img src="ymBut25.png"></span></td>
<td id="td1"><span id="ym26"><img src="ymBut26.png"></span></td>
<td id="td1"><span id="ym27"><img src="ymBut27.png"></span></td>
<td id="td1"><span id="ym28"><img src="ymBut28.png"></span></td>
<td id="td1"><span id="ym29"><img src="ymBut29.png"></span></td>
<td id="td1"><span id="ym30"><img src="ymBut30.png"></span></td>
<tr>
<td id="td1"><span id="ym31"><img src="ymBut31.png"></span></td>
<td id="td1"><span id="ym32"><img src="ymBut32.png"></span></td>
<td id="td1"><span id="ym33"><img src="ymBut33.png"></span></td>
<td id="td1"><span id="ym34"><img src="ymBut34.png"></span></td>
<td id="td1"><span id="ym35"><img src="ymBut35.png"></span></td>
</tr>
</table>
</div>
<div id="section2" >
<table id="table2" border=0 width="570" height="100">
<tr><th id="th2"><font size="5" face="標楷體"><b>自成音節</b></font></th></tr>
<tr height=5></tr>
<tr><td id="td2"><img src="zmBut0.png" onClick="zcSelectDian(0)"></td>
<td id="td2"><img src="zmBut1.png" onClick="zcSelectDian(1)"></td>
<td id="td2"><img src="zmBut2.png" onClick="zcSelectDian(2)"></td>
<td id="td2"><img src="zmBut3.png" onClick="zcSelectDian(3)"></td>
<td id="td2"><img src="zmBut4.png" onClick="zcSelectDian(4)"></td>
<td id="td2"><img src="zmBut4.png" onClick="zcSelectDian(5)"></td>
</tr>
<tr>
</tr>
<tr>
<td id="td2"><img src="button_zm2char.png" onClick="zcSelectDian(6)"></td>
<td id="td2"><img src="button_zm2char.png" onClick="zcSelectDian(7)"></td>
<td id="td2"><img src="button_zm2char.png" onClick="zcSelectDian(8)"></td>
<td id="td2"><img src="button_zm2char.png" onClick="zcSelectDian(9)"></td>
<td id="td2"><img src="button_zm3char.png" onClick="zcSelectDian(10)"></td>
</tr>
</table>
</div>
<div id="displayDian">
<div id="displayDianSub">
<table border=0 align="center" height="150" width="50">
<tr><td align="center" height="24" width="47"><span id="dian0"><img src="dianNoBut0.png"></span></td></tr>
<tr><td align="center" height="37" width="47"><span id="dian1"><img src="dianNoBut1.png"></span></td></tr>
<tr><td align="center" height="37" width="47"><span id="dian2"><img src="dianNoBut2.png"></span></td></tr>
<tr><td align="center" height="37" width="47"><span id="dian3"><img src="dianNoBut3.png"></span></td></tr>
</table>
</div>
</div>
<div id="displayEng01">
<div id="displayEng01Sub">
<table border=0 align="center" cellspacing="0" cellpadding="0" width="105" height="50">
<tr>
<td id="tdSmEng" width="35" align="right"></td>
<td id="tdYmEng" width="70" align="left"></td>
</tr>
</table>
</div>
</div>
<div id="displayEng02">
<div id="displayEng02Sub">
<table border=0 align="center" cellspacing="0" cellpadding="0" width="105" height="50">
<tr>
<td width="35"></td>
<td id="dianImage" align="left"></td>
</tr>
</table>
</div>
</div>
<div id="displayWord">
<div id="displayWordSub"><table id="outWord" align="center"></table></div>
</div>
<div id="arrow"><img src="">
</div>
<div id="combine"></div>
<div id="repeat"></div>
<span id="balloon"><img src="balloon.png">
</span>
<span id="playSound"></span>

<script>
var smTemp=99;
var ymTemp=99;
var zmTemp=99;
var dianTemp=99;
var smFile="99.swf";
var ymFile="99.swf";
var zcFile="99.swf";
var zcOutfile="99.wav";
var fileoutput="99.swf";
var timer;
var blink_counter;
var timer2;
var spe=500;
var swi;
var x=document.getElementById("playSound");
var z=document.getElementById("combine");
var h=document.getElementById("repeat");
var g=document.getElementById("outWord");
var w=document.getElementById("tdSmEng");
var f=document.getElementById("tdYmEng");
var p=document.getElementById("dianImage");
var na=document.getElementById("displayDian");
function selectDian(numB)
{z.innerHTML="";
h.innerHTML="";
g.innerHTML="";
ymTemp=numB;
f.innerHTML='<img src="ymEng'+ymTemp+'.png">';
p.innerHTML="";
if (numB<10)
        ymFile='y0'+numB+'.swf';
else
        ymFile='y'+numB+'.swf';

x.innerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="outSound" ><embed src="../material/'+ymFile+'" wmode="transparent"><param name="wmode" value="transparent"><param name="movie" value="../material/'+ymFile+'"></object>';
blink_counter=0;
swi=0;
blinking();
na.style.borderColor="#FFFF3E";
for (var j=0; j<4; j++)
        {var a=document.getElementById("dian"+j);
        a.innerHTML='<img src="dianBut'+j+'.png" onClick="result('+j+',true)">';
       
        }

}


function zcSelectDian(num3)
{ z.innerHTML="";
  h.innerHTML="";
  g.innerHTML="";  
  zmTemp=num3;
if (num3<10)
    zcFile='z0'+num3+'.swf';
else
    zcFile='z'+num3+'.swf';
x.innerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="outSound" ><embed src="../material/'+zcFile+'" wmode="transparent"><param name="wmode" value="transparent"><param name="movie" value="../material/'+zcFile+'"> </object>';
    for (n=0; n<36; n++)
        {var b=document.getElementById("ym"+n);
        b.innerHTML='<img src="ymNoBut'+n+'.png">';
        }
        blink_counter=0;
        swi=0;
        blinking();
        na.style.borderColor="#FFFF3E";
        for (m=0; m<4; m++)
        {var c=document.getElementById("dian"+m);
        c.innerHTML='<img src="dianBut'+m+'.png" onClick="result('+m+',false)">';
        }
}


function blinking()
{/*
if (swi == 1) {
sho="#FFFF3E";
swi=0;
}
else {
sho="#C6C0C0";
swi=1;
}
na.style.borderColor=sho;
blink_counter++;
if (blink_counter<15)
timer2=setTimeout("blinking()", spe);
else
clearTimeout(timer2);
*/}

function result(num4,firstSection)
{
dianTemp=num4;
var wordoutput;
clearTimeout(timer2);
na.style.borderColor="#FFFF3E";
  p.innerHTML='<img src="dianEng'+dianTemp+'.png" style="padding-left:0px">';  
  if (firstSection==true)
{   
        if (smTemp <10 && ymTemp < 10)
        {fileoutput="res0"+smTemp+"0"+ymTemp+"0"+dianTemp+".swf";
     wordoutput="word0"+smTemp+"0"+ymTemp+"0"+dianTemp+".swf";
    }
    else if (smTemp<10 && ymTemp>9)

        {fileoutput="res0"+smTemp+ymTemp+"0"+dianTemp+".swf";
        wordoutput="word0"+smTemp+ymTemp+"0"+dianTemp+".swf";
        }
        else if (smTemp>9 && ymTemp <10)
        { fileoutput="res"+smTemp+"0"+ymTemp+"0"+dianTemp+".swf";
        wordoutput="word"+smTemp+"0"+ymTemp+"0"+dianTemp+".swf";
        }
   else
   { fileoutput="res"+smTemp+ymTemp+"0"+dianTemp+".swf";
    wordoutput="word"+smTemp+ymTemp+"0"+dianTemp+".swf";
   }
x.innerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="outSound" ><embed src="../material/'+fileoutput+'" wmode="transparent" /><param name="wmode" value="transparent"><param name="movie" value="../material/'+fileoutput+'" /> </object>';

}
else {
  if (zmTemp<10)
  {  fileoutput="zsound0"+zmTemp+"0"+dianTemp+".wav";
     wordoutput="zword0"+zmTemp+"0"+dianTemp+".swf";
}
  else
  {fileoutput="zsound"+zmTemp+"0"+dianTemp+".wav";
  wordoutput="zword"+zmTemp+"0"+dianTemp+".swf";
  }
  x.innerHTML='<embed src="wave/'+fileoutput+'" hidden="true" autostart="true" loop="false" />';
}
  g.innerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="32" width="100"><embed src="../material/'+wordoutput+'" height="32" width="100" wmode="transparent" /><param name="wmode" value="transparent"><param name="movie" value="../material/'+wordoutput+'" /> </object>';


repeatSound(firstSection);
}
       
function repeatSound(test1)
{ if (test1)
{
  z.innerHTML='<img src="combine.png" onClick="combinePlay(1)">';
  h.innerHTML='<img src="repeat.png" onClick="repeatPlay(true)">';

}
else
  {
   z.innerHTML='<img src="combineNo.png">';
   h.innerHTML='<img src="repeat.png" onClick="repeatPlay(false)">';

  }
}       

function combinePlay(count)
{ if (count<4)
  { switch (count)
        {case 1:
        clearTimeout(timer);
    tempFile=smFile;
    break;
     case 2:
     tempFile=ymFile;
      break;
     case 3:
     tempFile=fileoutput;
         break;
         default:
         break;
         }
  x.innerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="outSound" ><embed src="../material/'+tempFile+'" wmode="transparent" /><param name="wmode" value="transparent"><param name="movie" value="../material/'+tempFile+'" /> </object>';
countNext=count+1;
timer=setTimeout("combinePlay(countNext)",2250);
  }
}

function repeatPlay(test2)
  { clearTimeout(timer);
        if (test2)
  x.innerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="outSound" ><embed src="../material/'+fileoutput+'" wmode="transparent" /><param name="wmode" value="transparent"><param name="movie" value="../material/'+fileoutput+'" /> </object>';
  else
  x.innerHTML='<embed src="wave/'+fileoutput+'" hidden=true autostart=true loop=false>';
}

function selectYm(num1)
{ z.innerHTML="";
  h.innerHTML="";
  g.innerHTML="";
smTemp=num1;
if (num1<10)
smFile='s0'+num1+'.swf';

else
smFile='s'+num1+'.swf';
w.innerHTML='<img src="smEng'+smTemp+'.png">';
f.innerHTML="";
p.innerHTML="";
x.innerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="outSound"><param name="wmode" value="transparent"><embed src="../material/'+smFile+'" wmode="transparent"/><param name="movie" value="../material/'+smFile+'"/></object>';

for (k=0; k<4; k++)
        {var b=document.getElementById("dian"+k);
        b.innerHTML='<img src="dianNoBut'+k+'.png">';
        }
switch (num1)
{ case 0:
        for (i = 0; i < 36; i++)
        switch (i)
        {case 0 :case 1: case 8: case 10:
         case 14: case 16: case 22:
  
        var y=document.getElementById("ym"+i);
           y.innerHTML='<img src="ymBut'+i+'.png" onClick="selectDian('+i+')">';
        break;
  
        default:
        var y=document.getElementById("ym"+i);
        y.innerHTML='<img src="ymNoBut'+i+'.png">';
        break;
        }
  break;
  
  case 1:
       
        for (i = 0; i < 36; i++)
        switch (i)
        {case 0 :case 1: case 7: case 8: case 10:
         case 14: case 16: case 22:
  
        var y=document.getElementById("ym"+i);
           y.innerHTML='<img src="ymBut'+i+'.png" onClick="selectDian('+i+')">';
        break;
  
        default:
        var y=document.getElementById("ym"+i);
        y.innerHTML='<img src="ymNoBut'+i+'.png">';
        break;
        }
        break;

case 4:
        for (i = 0; i < 36; i++)
        switch (i)
        {case 0 :case 7: case 8: case 10:  
         case 14: case 16: case 22:
  
        var y=document.getElementById("ym"+i);
           y.innerHTML='<img src="ymBut'+i+'.png" onClick="selectDian('+i+')">';
        break;
  
        default:
        var y=document.getElementById("ym"+i);
        y.innerHTML='<img src="ymNoBut'+i+'.png">';
        break;
        }
        break;

case 11:
        for (i = 0; i < 36; i++)
        switch (i)
        {case 14: case 16: case 21: case 22: case 32:
  
        var y=document.getElementById("ym"+i);
           y.innerHTML='<img src="ymBut'+i+'.png" onClick="selectDian('+i+')">';
        break;
  
        default:
        var y=document.getElementById("ym"+i);
        y.innerHTML='<img src="ymNoBut'+i+'.png">';
        break;
        }
        break;

case 14:
        for (i = 0; i < 36; i++)
        switch (i)
        {case 0 :case 7: case 8: case 10:  
         case 14: case 31:
  
        var y=document.getElementById("ym"+i);
           y.innerHTML='<img src="ymBut'+i+'.png" onClick="selectDian('+i+')">';
        break;
  
        default:
        var y=document.getElementById("ym"+i);
        y.innerHTML='<img src="ymNoBut'+i+'.png">';
        break;
        }
        break;

default:
        alert("error!");
        break;




}
}


</script>
</body>
</html>

TOP

俾我講中
You have lots of innerHtml assignments inside loops.
Instead, concatenate into a local variable string in loops.
After looping, assign the finished to innerHtml in one statement.

TOP

回覆 7# winstercafe

你的意思係唔係咁:
原本:
    for (k=0; k<4; k++)
        {var b=document.getElementById("dian"+k);
        b.innerHTML='<img src="dianNoBut'+k+'.png">';
        }

修改後:
for (k=0; k<4; k++)
        var b[k]=document.getElementById("dian"+k);
b[0].innerHTML='<img src="dianNoBut'+0+'.png">';        
b[1].innerHTML='<img src="dianNoBut'+1+'.png">';   
b[2].innerHTML='<img src="dianNoBut'+2+'.png">';   
b[3].innerHTML='<img src="dianNoBut'+3+'.png">';   

winstercafe 唔該幫我修改下, 謝謝!

TOP

你個PROGRAM.......睇死人
下個接手的話一定頭癢

TOP

回覆 9# ^.^


    無辦法, 個程式好複雜, 所以我宜家懷疑 IE  或者 handle 唔到咁多野!

TOP