定时器的运用，延时提示框

先上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #div1{ width: 50px;height: 50px; background-color: #008000;}
            #div2{ width: 250px;height: 250px; background-color: black;display: none;}
            div{float: left; margin: 10px;;}
        </style>
        <script>
            window.onload=function(){
                var odiv1=document.getElementById('div1');
                var odiv2=document.getElementById('div2');
                var timer=null;
                
                odiv1.onmouseover=function(){
                    clearTimeout(timer);
                    odiv2.style.display='block';
                }
                odiv1.onmouseout=function(){
                    timer=setTimeout(function(){
                        odiv2.style.display='none';
                    },500);
                }
                odiv2.onmouseover=function(){
                    clearTimeout(timer);
                    odiv2.style.display='block';
                }
                odiv2.onmouseout=function(){
                    timer=setTimeout(function(){
                        odiv2.style.display='none';
                    },500)
                }
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
</html>

这个代码  就是延时提示框  感兴趣的话  可以复制粘贴下来试一下

仔细观察这段代码，你会发现这个代码是可以化简的

试试看，化简一下。

posted @ 2015-10-19 20:17  路途遥远勿忘初心  阅读(155)  评论(0)  编辑  收藏  举报