JS小练习之实现延时提示框

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>实现延时提示框</title>
    <style>
    div{float:left;margin-left: 10px;}
    #div1{width: 50px;height:50px;background: red;}
    #div2{width: 200px;height: 200px;background: #ccc;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=function () {  //当鼠标进入div1时，div2显示出来，并清除延时定时器
        clearTimeout(timer);
        oDiv2.style.display='block';
      };
      oDiv1.onmouseout=function(){//当鼠标离开div1时，开启延时定时器，使得显示的div2的效果暂时保留一会
        timer=setTimeout(function(){
            oDiv2.style.display='none'; //等0.5s后div2才消失
        },500);
      };
      oDiv2.onmouseover=function(){ //当鼠标进入div2时，div2因该一直显示，所以这时要清除延时计时器
        clearTimeout(timer);
      }
      oDiv2.onmouseout=function(){//当鼠标离开div2时，div2应该过一会再消失，所以这里要用到延时定时器
        timer=setTimeout(function(){
            oDiv2.style.display='none';
        },500);
      }
    }
    </script>
  </head>
  <body>
    <div id='div1'></div>
    <div id='div2'></div>
  </body>
</html>

这个时候需要适时的化简一下代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>实现延时提示框</title>
    <style>
    div{float:left;margin-left: 10px;}
    #div1{width: 50px;height:50px;background: red;}
    #div2{width: 200px;height: 200px;background: #ccc;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 () {  //当鼠标进入div1时，div2显示出来，并清除延时定时器
        clearTimeout(timer);
        oDiv2.style.display='block';
      };
      oDiv1.onmouseout=oDiv2.onmouseout=function(){//当鼠标离开div1时，开启延时定时器，使得显示的div2的效果暂时保留一会
        timer=setTimeout(function(){
            oDiv2.style.display='none'; //等0.5s后div2才消失
        },500);
      };
    }
    </script>
  </head>
  <body>
    <div id='div1'></div>
    <div id='div2'></div>
  </body>
</html>

JS小练习之实现延时提示框

猜你喜欢