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     else
82     {
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                 else
15                 {
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，和数组下标相同。当把鼠标移动到相应的星星上面的时候，颜色和文字说明都会发生变化，并且弹出提示框。