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

313 查看

延时提示框的制作步骤：

动态效果图：
第一步
分别使用点击事件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>

效果图
图片描述