为了账号安全,请及时绑定邮箱和手机立即绑定

实践|教你制作简易延时提示框

延时提示框的制作步骤:


  • 动态效果图:

    动态效果图

  • 第一步
    分别使用点击事件onmouseover和onmouseout,来设置oDiv2的属性,使之显示或隐藏;
var oDiv1 = document.getElementById("div1");
    var oDiv2 = document.getElementById("div2");
    oDiv1.onmouseover = function() {
        oDiv2.style.display = "block";
    }
    oDiv1.onmouseout = function() {
        oDiv2.style.display = "none";
    }

  • 第二步
    设置oDiv2延时1秒后再消失,并且设置一个变量timer把它存起来;
var timer=null;
    oDiv1.onmouseout = function() {
           timer = setTimeout(function() {
                oDiv2.style.display = "none";
            },1000);
}

  • 第三步
    当鼠标移到oDiv2的时候,由于延时一秒后会消失,所以这时要清除定时器;
oDiv2.onmouseover = function() {
        clearTimeout(timer);
}

  • 第四步
    当鼠标离开oDiv2的时候,我们在oDiv1和oDiv2之间来来回回徘徊时,会有一瞬间的频闪,所以,这里也要设置当鼠标离开oDiv2时来个定时器;
oDiv2.onmouseout = function() {
    timer = setTimeout(function() {
        oDiv2.style.display = "none";
    },1000);
}

  • 第五步
    当鼠标从oDiv2移动到oDiv1的时候,由于oDiv2的onmouseout定时器没有清除,所以过一秒后,oDiv2还是会消失;这里,我们就清除定时器(当oDiv2移动到oDiv1时,使oDiv2上的定时器解除):
oDiv1.onmouseover = function() {
    clearTimeout(timer);
        oDiv2.style.display = "block";
}

  • 最后:
    当代码相似的情况下,我们要想办法使之简化,这样就不会显得冗余;
    在JS中,允许我们这样做:a=b=c=1;
    所以,观察上面代码我们可以得出以下代码:
oDiv1.onmouseover = oDiv2.onmouseover = function() {
    clearTimeout(timer);
    oDiv2.style.display = "block";
}
    oDiv1.onmouseout = oDiv2.onmouseout = function() {
    timer = setTimeout(function() {
        oDiv2.style.display = "none";
    },1000);
}
  • 其实,想通制作的步骤,写代码才会行云流水。

完整代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>延时提示</title>
        <style type="text/css">
            body {background-color: #FC9;}
            #div1,#div2 {
                margin: 10px;
                float: left;
                color: #FFF;
                text-align: center;
                border: 3px solid #EEE;
            }
            #div1 {
                width: 100px;
                height: 100px;
                background-color: #F60;
                font-size: 20px;
                padding-top: 10px;
            }
            #div2 {
                width: 300px;
                height: 250px;
                background-color: #599;
                font-size: large;
                line-height: 48px;
                padding-top: 10px;
                display: none;
            }

        </style>
        <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() {
                    clearTimeout(timer);
                    oDiv2.style.display = "block";
                }
                oDiv1.onmouseout = oDiv2.onmouseout = function() {
                    timer = setTimeout(function() {
                        oDiv2.style.display = "none";
                    },1000);
                }

            }
        </script>
    </head>
    <body>
        <div id="div1">登岳阳楼<p>杜甫</p></div>
        <div id="div2"> 
            昔闻洞庭水,今上岳阳楼。<br />
            吴楚东南坼,乾坤日夜浮。<br />
            亲朋无一字,老病有孤舟。<br />
            戎马关山北,凭轩涕泗流。
        </div>
    </body>
</html>

效果图
图片描述

点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消