javascript小实例【第四课时笔记】

1.模仿延时提示框js代码。

<script type="text/javascript">
window.onload=function ()
{
    var oHead=document.getElementById('head');
    var oRight=document.getElementById('right');
    var timer=null;
    
    oRight.onmouseover=oHead.onmouseover=function ()
    {
        clearInterval(timer);
        setTimeout(function (){
            oRight.style.display='block';
        }, 300);
    };
    oRight.onmouseout=oHead.onmouseout=function ()
    {
        clearInterval(timer);
        timer=setTimeout(function (){
            oRight.style.display='none';
        }, 300);
    };
};
</script>

连续赋值(连等)a=b=1，代码中通过简化，利用了连等这个特性；其次，主要应用onmouseover / onmouseout这两个事件；以及延时性的定时器。

2.无缝滚动js代码

var g_bMoveLeft=true;
var g_oTimer=null;
var g_oTimerOut=null;

var g_iSpeed=3;

window.onload=function ()
{
    var oDiv=document.getElementById('roll');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    var aA=oDiv.getElementsByTagName('a');
    
    var i=0;
    
    var str=oUl.innerHTML+oUl.innerHTML;
    
    oUl.innerHTML=str;
    
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
    
    for(i=0;i<aLi.length;i++)
    {
        aLi[i].onmouseover=function ()
        {
            stopMove();
        };
        
        aLi[i].onmouseout=function ()
        {
            startMove(g_bMoveLeft);
        };
    }
    
    aA[0].onmouseover=function ()
    {
        startMove(true);
    };
    
    aA[1].onmouseover=function ()
    {
        startMove(false);
    };
    
    startMove(true);
};

function startMove(bLeft)
{
    g_bMoveLeft=bLeft;
    
    if(g_oTimer)
    {
        clearInterval(g_oTimer);
    }
    g_oTimer=setInterval(doMove, 30);
}

function stopMove()
{
    clearInterval(g_oTimer);
    g_oTimer=null;
}

function doMove()
{
    var oDiv=document.getElementById('roll');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    
    var l=oUl.offsetLeft;
    
    if(g_bMoveLeft)
    {
        l-=g_iSpeed;
        if(l<=-oUl.offsetWidth/2)
        {
            l+=oUl.offsetWidth/2;
        }
    }
    else
    {
        l+=g_iSpeed;
        if(l>=0)
        {
            l-=oUl.offsetWidth/2;
        }
    }
    
    oUl.style.left=l+'px';
}

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实现。

function leo(n){
    var navUi = document.getElementById("m"+n);
    if(navUi.style.display != "block"){
        for(var i=0;i<=5;i++){
            document.getElementById("m"+i).style.display = "none";
        }
        navUi.style.display = "block";
    }else{
        navUi.style.display = "none";
    }
}
</script>

这里给出了一个最基本的二级菜单的代码。首先要在结构和样式里面布局好，通过改变display的none和block值来显示或隐藏菜单。

4.软件即时评分

window.onload=function(){
    var oPf=document.getElementById('pingfen');
    var aLi=oPf.getElementsByTagName('li');
    var i=0;
    
    for(i=0;i<aLi.length;i++){
        aLi[i].index=i;
        aLi[i].onmouseover=function(){
            for(i=0;i<aLi.length;i++){
                if(i<=this.index)
                {
                    aLi[i].style.background="url(star.gif) no-repeat 0 -29px";
                }
                else
                {
                    aLi[i].style.background="url(star.gif) no-repeat 0 0";
                }
            }
        };
        
        aLi[i].onmousedown=function ()
        {
            alert('提交成功:'+(this.index+1)+'分');
        };
    }
};

this.index的应用，获取当前的索引号，注意第一个是索引号码0而不是1，和数组下标相同。当把鼠标移动到相应的星星上面的时候，颜色和文字说明都会发生变化，并且弹出提示框。