延时提示框

Posted 2020-08-28 Mr_W

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了延时提示框相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qq_info</title>
    <style type="text/css">
        #div1{width:200px;height: 30px;background: red;}
        #div2{width:150px;height:20px;background: #ccc;margin:10px;display: none;}
    </style>
    <script type="text/javascript">
        // ____________001_______________________
        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);
            }
        }
    // _____________________001end________________________
    // _____________________002___________________________
        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;//注意js函数调用不加括号表示调用的函数整体，加括号表示调用函数返回的值
            }
    //_____________________002end_________________________
    //_____________________003____________________________

        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);
                }

            }    
    //_____________________003end_________________________
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

查看范例

以上是关于延时提示框的主要内容，如果未能解决你的问题，请参考以下文章

你可能不知道的JavaScript代码片段和技巧（下）