延时提示框与提示框关闭定时弹出

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>setTimeout延迟提示框</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{
	margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑';
}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
  list-style:none;
}
#box{
  height:35px;margin:20px;
}
#box li{
  position:relative; height:35px; line-height:35px; padding:0 10px;35px;
  background:#000; display:block; cursor:pointer; color:#fff;
}
#box div{
 position:absolute; top:35px; left:0px; 60px;
 background:#000; padding-left:10px; display:none;
}
</style>
</head>
<body>
<ul id='box'>
   <li>开始
     <div>
	    <p>提示一</p>
        <p>提示二</p>
        <p>提示三</p>  		
	 </div>  
   </li>
    
</ul>
<script type="text/javascript">
window.onload = function(){
  var oBox = $('box');
  var oLi = oBox.getElementsByTagName('li')[0];
  var oDiv = oBox.getElementsByTagName('div')[0];
  var timer = null;
  oLi.onmousemove = Move;
  oLi.onmouseout = Out;
  function Move(){
    clearTimeout(timer);
    oDiv.style.display ='block'; 
  };
  function Out(){
    timer = setTimeout(function(){
	   oDiv.style.display ='none';
	},600);
  };
}
function $(id){
  return document.getElementById(id);
}
</script>  
</body>
</html>

用setTimeout做的延时提示框

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>setInterval与clearInterval</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{
	margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑';
}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
  list-style:none;
}
#box{
  300px; height:200px; border:1px solid #ccc; margin:20px;
  position:relative; background:#666;
}
#box span{
  display:block; border:1px solid #ccc; 35px; font-size:12px; cursor:pointer; color:#fff;
  height:20px; line-height:20px; text-align:center; position:absolute; top:2px; right:2px;
}
</style>
</head>
<body>
<div id='box'>
     <span>关闭</span>
</div>
<script type="text/javascript">
window.onload = function(){
  var oBox = $('box');
  var oClose = oBox.getElementsByTagName('span')[0];
  var timer = null;
  oClose.onclick = onClose;
  function onClose(){
    oBox.style.display = 'none';
	clearInterval(timer);
    timer=setInterval(function(){
	   oBox.style.display ='block';
	},5000);	
  };
}
function $(id){
  return document.getElementById(id);
}
</script>  
</body>
</html>

setInterval定时弹出提示框　　