javascript小執行個體【第四課時筆記】

1.模仿延時提示框js代碼。

 1 <script type="text/javascript"> 2 window.onload=function () 3 { 4     var oHead=document.getElementById('head'); 5     var oRight=document.getElementById('right'); 6     var timer=null; 7      8     oRight.onmouseover=oHead.onmouseover=function () 9     {10         clearInterval(timer);11         setTimeout(function (){12             oRight.style.display='block';13         }, 300);14     };15     oRight.onmouseout=oHead.onmouseout=function ()16     {17         clearInterval(timer);18         timer=setTimeout(function (){19             oRight.style.display='none';20         }, 300);21     };22 };23 </script>

連續賦值(連等)a=b=1，代碼中通過簡化，利用了連等這個特性；其次，主要應用onmouseover / onmouseout這兩個事件；以及延時性的定時器。

 

2.無縫滾動js代碼

 1 var g_bMoveLeft=true; 2 var g_oTimer=null; 3 var g_oTimerOut=null; 4  5 var g_iSpeed=3; 6  7 window.onload=function () 8 { 9     var oDiv=document.getElementById('roll');10     var oUl=oDiv.getElementsByTagName('ul')[0];11     var aLi=oUl.getElementsByTagName('li');12     var aA=oDiv.getElementsByTagName('a');13     14     var i=0;15     16     var str=oUl.innerHTML+oUl.innerHTML;17     18     oUl.innerHTML=str;19     20     oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';21     22     for(i=0;i<aLi.length;i++)23     {24         aLi[i].onmouseover=function ()25         {26             stopMove();27         };28         29         aLi[i].onmouseout=function ()30         {31             startMove(g_bMoveLeft);32         };33     }34     35     aA[0].onmouseover=function ()36     {37         startMove(true);38     };39     40     aA[1].onmouseover=function ()41     {42         startMove(false);43     };44     45     startMove(true);46 };47 48 function startMove(bLeft)49 {50     g_bMoveLeft=bLeft;51     52     if(g_oTimer)53     {54         clearInterval(g_oTimer);55     }56     g_oTimer=setInterval(doMove, 30);57 }58 59 function stopMove()60 {61     clearInterval(g_oTimer);62     g_oTimer=null;63 }64 65 function doMove()66 {67     var oDiv=document.getElementById('roll');68     var oUl=oDiv.getElementsByTagName('ul')[0];69     var aLi=oUl.getElementsByTagName('li');70     71     var l=oUl.offsetLeft;72     73     if(g_bMoveLeft)74     {75         l-=g_iSpeed;76         if(l<=-oUl.offsetWidth/2)77         {78             l+=oUl.offsetWidth/2;79         }80     }81     else82     {83         l+=g_iSpeed;84         if(l>=0)85         {86             l-=oUl.offsetWidth/2;87         }88     }89     90     oUl.style.left=l+'px';91 }

 

offsetLeft( 返回對象相對於父級對象的布局或座標的left值，就是以父級對象左上方為座標原點，向右和向下為X、Y軸正方向的x座標) 不懂這個屬性的可以看著一篇文章http://www.cnblogs.com/JackJiang/archive/2008/12/24/1361048.html/ offsetWidth（對象的可見寬度，包捲軸等邊線，會隨視窗的顯示大小改變。）

通過li.offsetWidth*li.length=ul動態得到ul長度，無論有多少個li都會及時的改變ul的長度。

絕對位置的top和left值的修改，只有在CSS樣式中設定了相應的position：absolute才能夠有效改變offsetLeft的值。

innerHTML賦值

關於+=這個符號，例如a+=b的意思就是a=b+a;本例中運用了innerHTML+=innerHTML。

 

3.三級菜單通過js實現。

 1 function leo(n){ 2     var navUi = document.getElementById("m"+n); 3     if(navUi.style.display != "block"){ 4         for(var i=0;i<=5;i++){ 5             document.getElementById("m"+i).style.display = "none"; 6         } 7         navUi.style.display = "block"; 8     }else{ 9         navUi.style.display = "none";10     }11 }12 </script>

這裡給出了一個最基本的二級菜單的代碼。首先要在結構和樣式裡面布局好，通過改變display的none和block值來顯示或隱藏菜單。

 

4.軟體即時評分

 1 window.onload=function(){ 2     var oPf=document.getElementById('pingfen'); 3     var aLi=oPf.getElementsByTagName('li'); 4     var i=0; 5      6     for(i=0;i<aLi.length;i++){ 7         aLi[i].index=i; 8         aLi[i].onmouseover=function(){ 9             for(i=0;i<aLi.length;i++){10                 if(i<=this.index)11                 {12                     aLi[i].style.background="url(star.gif) no-repeat 0 -29px";13                 }14                 else15                 {16                     aLi[i].style.background="url(star.gif) no-repeat 0 0";17                 }18             }19         };20         21         aLi[i].onmousedown=function ()22         {23             alert('提交成功:'+(this.index+1)+'分');24         };25     }26 };

this.index的應用，擷取當前的索引號，注意第一個是索引號碼0而不是1，和數組下標相同。當把滑鼠移動到相應的星星上面的時候，顏色和文字說明都會發生變化，並且彈出提示框。