2016年5月25日下午(妙味课堂js预热课程-4笔记)

Posted zzjeny

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2016年5月25日下午(妙味课堂js预热课程-4笔记)相关的知识,希望对你有一定的参考价值。

一、延时显示框

  首先我们要做的是制作两个显示框,当鼠标移入显示框1的时候显示框2出来,当鼠标移出的时候显示框2消失;其代码如下:

<script type="text/javascript">
        window.onload=function () {
            var oDiv1=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");
oDiv1.onmouseover=function () { oDiv2.style.display="block"; }; oDiv1.onmouseout=function () { oDiv2.style.display="none"; } } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body>

  然后我们要做的就是我们发现当鼠标要移出显示框1的时候是始终不能移入显示框2,现在我们就要加入一个延时型的定时器了,setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout(code,millisec);

  代码如下:

 <script type="text/javascript">
        window.onload=function () {
            var oDiv1=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");

            oDiv1.onmouseover=function () {
                oDiv2.style.display="block";
            };
            oDiv1.onmouseout=function () {
                setTimeout(function () {
                    oDiv2.style.display="none";
                }, 300);
            }
        }
    </script>

  但是这时候我们发现显示框2还是在定时以后会消失,那现在我们要做的就是给显示框2也加入一个鼠标移入:即效果为鼠标可以移入显示框2,且鼠标移出时显示框2消失:代码如下:

<script type="text/javascript">
        window.onload=function () {
            var oDiv1=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");
            var timer=null;

            oDiv1.onmouseover=function () {
                oDiv2.style.display="block";
            };
            oDiv1.onmouseout=function () {
                timer=setTimeout(function () {
                    oDiv2.style.display="none";
                }, 300);
            };
            oDiv2.onmouseover=function () {
                clearTimeout(timer);
            };
            oDiv2.onmouseout=function () {
                oDiv2.style.display="none";
            }
        }
    </script>

  这里要注意两个地方:即

    1、给div2也加一个鼠标移入,即当div2鼠标移入地时候,我们要把定时器给清除掉,这样就不会造成鼠标移入地时候造成div2还是消失的这么一个情况,即把定时器给存起来;

    同时在鼠标移入div2的时候我们把定时器给清了;即 oDiv2.onmouseover=function () {clearTimeout(timer);};

     2、当鼠标从div2移出的时候,显示框2消失;

  这里还有一个问题是当鼠标从显示框2移入到显示框1时它会闪烁一下,因为当我们鼠标离开时显示框2会消失,而当移入显示框1时显示框2才出来,所以中间还是会闪烁一下;这里我们的解决办法是一样的,即给显示框2 加一个延时型的定时器;代码如下所示:

<script type="text/javascript">
        window.onload=function () {
            var oDiv1=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");
            var timer=null;

            oDiv1.onmouseover=function () {
                oDiv2.style.display="block";
            };
            oDiv1.onmouseout=function () {
                timer=setTimeout(function () {
                    oDiv2.style.display="none";
                }, 300);
            };
            oDiv2.onmouseover=function () {
                clearTimeout(timer);
            };
            oDiv2.onmouseout=function () {
                setTimeout(function () {
                    oDiv2.style.display="none";
                },300);
            }
        }
    </script>

  说到这里我们又会注意到当鼠标移入显示框1的时候,显示框2 还是会消失,因为显示框2的定时器还在,这个时候我们就可以一样的把显示框2的定时器给存起来,同时在div1的显示框1上面加一个清除定时器;这样我们就可以在显示框1与显示框2之间自由的移动,直到鼠标移出这两个显示框时才消失;代码如下:

 <script type="text/javascript">
        window.onload=function () {
            var oDiv1=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");
            var timer=null;

            oDiv1.onmouseover=function () {
                oDiv2.style.display="block";
                clearTimeout(timer);
            };
            oDiv1.onmouseout=function () {
                timer=setTimeout(function () {
                    oDiv2.style.display="none";
                }, 300);
            };
            oDiv2.onmouseover=function () {
                clearTimeout(timer);
            };
            oDiv2.onmouseout=function () {
                timer=setTimeout(function () {
                    oDiv2.style.display="none";
                },300);
            }
        }
    </script> 

  clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

    clearTimeout(id_of_settimeout)

简化代码:代码得到很大的简化;

<script type="text/javascript">
        window.onload=function () {
            var oDiv1=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");
            var timer=null;

            function show() {
                oDiv2.style.display="block";
                clearTimeout(timer);
            }
            function hide() {
                timer=setTimeout(function () {
                    oDiv2.style.display="none";
                }, 300);
            }

            oDiv1.onmouseover=show;
            oDiv2.onmouseover=show;
            oDiv1.onmouseout=hide;
            oDiv2.onmouseout=hide;
        }
    </script>

  总结延时提示框:

    1、原来的方法:移入显示,移出隐藏;

    2、移出延时隐藏:移出下面的div后,还是隐藏了,就需要清除延时型的定时器;

    3、简化代码:合并两个相同的mouseover和mouseout;

再进行简化:(连续赋值)

<script type="text/javascript">
        window.onload=function () {
            var oDiv1=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");
            var timer=null;

            oDiv1.onmouseover=oDiv2.onmouseover=function() {
                oDiv2.style.display="block";
                clearTimeout(timer);
            };
            oDiv1.onmouseout=oDiv2.onmouseout=function() {
                timer=setTimeout(function () {
                    oDiv2.style.display="none";
                }, 300);
            };
        }
    </script>

  写了这么多,笨的人只能用笨的方法,总结一下就是做一个延时显示框,要用js对其实现。鼠标移入移出事件,以及延时型的定时器,并且要知道如何清除定时器。

 

 

  

 

以上是关于2016年5月25日下午(妙味课堂js预热课程-4笔记)的主要内容,如果未能解决你的问题,请参考以下文章

妙味js预热课程

2016年5月27日下午(妙味课堂js基础-3笔记三(事件))

2016年5月27日下午(妙味课堂js基础-3笔记二(事件))

2016年5月27日上午(妙味课堂js基础-3笔记一(事件))

妙味js预热课程

4月25日下午学习日志