Small javascript instance [Lesson 4 Note]

1. Simulate the js Code in the delayed prompt box.

 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>

Continuous value assignment (concatenation) a = B = 1. This feature is simplified in the Code. Second, the onmouseover/onmouseout events are mainly used; and latency timer.

 

2. Seamless js Code scrolling

 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 (return the left value of the layout or coordinates of the object relative to the parent-level object, that is, the coordinate origin is in the upper left corner of the parent-level object, and the X coordinates are in the right and down directions of x and Y axes) don't understand this property can look at an article http://www.cnblogs.com/JackJiang/archive/2008/12/24/1361048.html/ offsetWidth (visible width of the object, package scroll bar and other edges, will change with the display size of the window .)

Use li. offsetWidth * li. length = ul to dynamically obtain the ul length. No matter how many lies are there, the ul length will be changed in time.

You can change the value of offsetLeft only when the position: absolute parameter is set in the CSS style.

InnerHTML assignment

For example, a + = B Indicates a = B + a. innerHTML + = innerHTML is used in this example.

 

3. The third-level menu is implemented through 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>

The code of the most basic level-2 menu is provided here. First, you must layout the structure and style, and display or hide the menu by changing the none and block values of the display.

 

4. Real-time software rating

1 window. onload = function () {2 var oPf = document. getElementById ('pingfen'); 3 var aLi = oPf. getElementsByTagName ('lil'); 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 ('submitted successfully: '+ (this. index + 1) + 'shard'); 24}; 25} 26 };

This. index application obtains the current index number. Note that the first index number is 0 rather than 1, which is the same as the array subscript. When you move the mouse over the corresponding stars, the color and text instructions change and a prompt box is displayed.